JSFiddle - React, Tailwind, and code Playground

by rjurd

HTML

<input type="button" value="add 10%" onclick="add(10)" />
<input type="button" value="80%" onclick="specify(80)" />
<div class="meter animate">   
    <span id="progress" style="width: 50%"><span></span></span>
</div>

CSS

.meter { 
    height: 20px;  /* Can be anything */
    width:200px;
    position: relative;
    margin: 10px 0 20px 0; /* Just for demo spacing */
    background: #555;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    padding: 0px;
    -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
    -moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
    box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.3);
}
.meter > span {
    display: block;
    height: 100%;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 8px;
    background-color: rgb(43,194,83);
    background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(43,194,83)),
    color-stop(1, rgb(84,240,84))
    );
    background-image: -moz-linear-gradient(
    center bottom,
    rgb(43,194,83) 37%,
    rgb(84,240,84) 69%
    );
    -webkit-box-shadow: 
    inset 0 2px 9px  rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4);
    -moz-box-shadow: 
    inset 0 2px 9px  rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4);
    box-shadow: 
    inset 0 2px 9px  rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
}
.meter > span:after, .animate > span > span {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background-image: 
    -webkit-gradient(linear, 0 0, 100% 100%, 
      color-stop(.25, rgba(255, 255, 255, .2)), 
      color-stop(.25, transparent), color-stop(.5, transparent), 
      color-stop(.5, rgba(255, 255, 255, .2)), 
      color-stop(.75, rgba(255, 255, 255, .2)), 
      color-stop(.75, transparent), to(transparent)
    );
    background-image: 
    -moz-linear-gradient(
      -45deg, 
      rgba(255, 255, 255, .2) 25%, 
      transparent 25%, 
      transparent 50%, 
      rgba(255, 255, 255, .2) 50%, 
      rgba(255, 255, 255, .2) 75%, 
      transparent 75%, 
  ...

JavaScript

function add(per) {
    var myspan = $("#progress"); 
    var next = myspan.width()/myspan.parent().width()*100 + per/100*myspan.parent().width();
    next = (next > 100) ? 100 : next;
    $("#progress").animate({
        width: next + "%"
    }, 1200);
}

function specify(per) {
    $("#progress").animate({
        width: per + "%"
    }, 1200);
}

$(function() {
    $(".meter > span").each(function() {
        $(this).data("origWidth", $(this).width()).width(0).animate({
            width: $(this).data("origWidth")
        }, 1200);
    });
});