Progress Bar Liquid Bubble

index.html

<!--
    Inspired by Code Pen User
    Jamie Dixon, with this pen
    https://codepen.io/JamieDixon/pen/Pqrjvv

    I cleaned up a lot of errors and redundant stuff
    then made it more awesome and customizeable
-->

<div class="wrapper">
  
  <span class="instructions">The progress bubble below can transition between red, orange, and green depending on the current percentage.</span>
   <span class="instructions">Go ahead and try it out by using the text box below.</span>
  
  <div class="green">
    <div class="progress">
      <div class="inner">
        <div class="percent"><span>67</span>%</div>
        <div class="water"></div>
        <div class="glare"></div>
      </div>
    </div>
  </div>
  
  <span>Enter Percentage: <input type="text" placeholder="67" id="percent-box">%</span>
  
  <section id="copyright">
    <div>(c) 2015 June Hanabi - <a href="https://opensource.org/licenses/MIT">License MIT</a> </div>
    
     <div>Work is modified and inspired from <a href="https://codepen.io/JamieDixon/pen/Pqrjvv">Jamie Dixon's pen</a></div>
  </section>
</div>

progress-bar-liquid-bubble.markdown

Progress Bar Liquid Bubble

A customizable and theme-able progress bar in the shape of a bubble with constantly sloshing water inside of it. This demo features 3 colors, red, orange, and green depending on the percentage and a textbox to smoothly change the value. Code Modified and Inspired from Jamie Dixon's pen

A Pen by June Hanabi on CodePen.

License.

script.js

var colorInc = 100 / 3;

$(function()
{
  $("#percent-box").click(function()
  {
    $(this).select();
  });
  
  $("#percent-box").keyup(function()
  {
    var val = $(this).val();
    
    if(val != ""
      && !isNaN(val)
      && val <= 100
      && val >= 0)
    {
      console.log(val);
      
      var valOrig = val;
      val = 100 - val;
      
      if(valOrig == 0)
      {
        $("#percent-box").val(0);
        $(".progress .percent").text(0 + "%");
      }
      else $(".progress .percent").text(valOrig + "%");
      
      $(".progress").parent().removeClass();
      $(".progress .water").css("top", val + "%");
      
      if(valOrig < colorInc * 1)
        $(".progress").parent().addClass("red");
      else if(valOrig < colorInc * 2)
        $(".progress").parent().addClass("orange");
      else
        $(".progress").parent().addClass("green");
    }
    else
    {
      $(".progress").parent().removeClass();
      $(".progress").parent().addClass("green");
      $(".progress .water").css("top", 100 - 67 + "%");
      $(".progress .percent").text(67 + "%");
      $("#percent-box").val("");
    }
  });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.stylus

@import "nib"

@keyframes spin
  from
    transform rotate(0deg)
  to
    transform rotate(360deg)

 placeholder()
  ::-webkit-input-placeholder
    {block}
  :-moz-placeholder
    {block}
  ::-moz-placeholder
    {block}
  :-ms-input-placeholder
    {block}

text-glow()
  text-shadow 0 0 arguments

box-glow()
  box-shadow 0 0 arguments

// Page
page-font = sans-serif
page-background-color = darken(white, 90%)

progress-bubble($color, $amount)
  // Progress Bar
  progress-primary-color = $color
  progress-size = 250px
  progress-border-size = 5px
  progress-inner-border-size = 5px
  progress-inner-size = progress-size - (progress-border-size + progress-inner-border-size)
  progress-inner-border = progress-inner-border-size solid page-background-color

  progress-alpha = 50%
  progress-level-change-speed = 1s
  progress-swish-speed = 10s
  progress-percent-color = darken(progress-primary-color, 40%)

  progress-percent-glow = 10px darken(progress-percent-color, 25%)
  progress-box-glow = 20px darken(progress-percent-color, 25%)
  progress-liquid-glow = 20px darken(progress-percent-color, 5%)

  progress-glare-background = rgba(255, 255, 255, 0.15)
  progress-level = (100% - $amount)
  
  .progress
    +cache('.progress')
      position relative
      border-radius 50%

    +cache('.progress' + progress-size)
      width progress-size
      height progress-size
    
    +cache('.progress' + progress-border-size + " " + progress-primary-color)
      border progress-border-size solid progress-primary-color
    
    +cache('.progress' + progress-box-glow)
      box-glow progress-box-glow
    
    +cache('.progress' + progress-level-change-speed)
      transition all progress-level-change-speed ease
      
    .inner
      +cache('.progress .inner')
        position absolute
        overflow hidden
        z-index 2
        border-radius 50%
        
      +cache('.progress .inner' + progress-inner-size)
        width progress-inner-size
        height progress-inner-size

      +cache('.progress .inner' + progress-inner-border)
        border progress-inner-border
        
      +cache('.progress .inner' + progress-level-change-speed)
        transition all progress-level-change-speed ease

      .water
        +cache('.progress .inner .water')
          position absolute
          z-index 1
          width 200%
          height 200%
          left -50%
          border-radius 40%
          animation-iteration-count infinite
          animation-timing-function linear
          animation-name spin
        
        +cache('.progress .inner .water' + progress-level)
          top progress-level
        
        +cache('.progress .inner .water' + progress-primary-color + " " + progress-alph)
          background alpha(progress-primary-color, progress-alpha)
        
        +cache('.progress .inner .water' + progress-level-change-speed)
          transition all progress-level-change-speed ease
        
        +cache('.progress .inner .water' + progress-swish-speed)
          animation-duration progress-swish-speed
        
        +cache('.progress .inner .water' + progress-liquid-glow)
          box-glow progress-liquid-glow

      .glare
        +cache('.progress .inner .glare')
          position absolute
          top -120%
          left -120%
          z-index 5
          width 200%
          height 200%
          transform rotate(45deg)
          border-radius 50%
        
        +cache('.progress .inner .glare' + progress-glare-background)
          background-color progress-glare-background
        
        +cache('.progress .inner .glare' + progress-level-change-speed)
          transition all progress-level-change-speed ease

      .percent
        +cache('.progress .inner .percent')
          position absolute
          top 0
          left 0
          width 100%
          height 100%
          font-weight bold
          text-align center
          
        +cache('.progress .inner .percent' + progress-inner-size)
          line-height progress-inner-size
          font-size (progress-inner-size / 2.6px)
        
        +cache('.progress .inner .percent' + progress-percent-color)
          color progress-percent-color
        
        +cache('.progress .inner .percent' + progress-percent-glow)
          text-glow progress-percent-glow
        
        +cache('.progress .inner .percent' + progress-level-change-speed)
          transition all progress-level-change-speed ease

*
  box-sizing border-box

html, body
  height 100%

body
  background-color page-background-color
  font-family page-font
  font-size 15px
  color darken(white, 20%)

input[type="text"]
  background-color transparent
  margin-top 30px
  border 0
  border-bottom solid 1px lighten(blue, 50%)
  text-align center
  font-size 20px
  color lighten(rgb(50, 118, 237), 15%)
  text-glow 3px lighten(rgb(50, 118, 237), 15%)
  width 45px
  display inline-block
  
input:focus
  outline 0
  border-bottom dashed 1px lighten(red, 50%)

input::selection
  color page-background-color
  background-color lighten(lightblue, 30%)

+placeholder()
  color lighten(rgb(50, 118, 237), 35%)
  text-glow 3px lighten(rgb(50, 118, 237), 35%)

.wrapper
  display flex
  align-items center
  justify-content center
  flex-direction column
  height 100%

.green
  margin-top 15px
  progress-bubble(rgb(83, 252, 83), 75%)

.red
  margin-top 15px
  progress-bubble(rgb(237, 59, 59), 25%)

.orange
  margin-top 15px
  progress-bubble(rgb(240, 124, 62), 50%)

#copyright
  margin-top 25px
  background-color transparent
  font-size 14px
  color darken(white, 30%)
  text-align center
  
  div
    margin-bottom 10px
  
  a
  a:link
    color gray
    text-decoration none
    border-bottom 1px solid gray
    padding-bottom 2px

  a:active
    color darken(white, 30%)
  
  a:hover
    color darken(white, 30%)
    border-bottom 1px solid darken(white, 30%)
    padding-bottom 4px

.instructions
  display inline-block
  margin 5px 0
  font-size 16px