JSFiddle - React, Tailwind, and code Playground

by Andrey K

HTML

<div id="t1" class="grad" style="background-color:Aqua;width:100px;height:20px; float:left;margin-top:4px">
<div id="d" style="width:100px;height:20px; float:left;margin-top:4px;font-size:13px;">tone 63%</div>
</div>
<div id="t2" class="top-to-bottom" style="float:left;width:0px;height:28px;border-right-color:#FCE805;border-right-style:solid;border-right-width:4px;position:absolute;">
</div>

CSS

#bardivs {
    /*width:400px;  or whatever the of the porgress bar is */
    border:0px solid;
/*border-radius:25px;*/
background-color:blue;
height:25px;
float:left;
    /* 
       The position of #bardivs must be something other than
       static (the default) so that its children will be positioned
       relative to it.
    */
    position:relative;
}

 #bardivs2 {
   /* width:400px;  or whatever the of the porgress bar is */
    border:0px solid;
/*border-radius:25px;*/
background-color:Aqua;
height:25px;
float:left;
    /* 
       The position of #bardivs must be something other than
       static (the default) so that its children will be positioned
       relative to it.
    */
    position:relative;
}

#test {
   /* width:400px;  or whatever the of the porgress bar is */
    border:2px solid;
/*border-radius:25px;*/
background-color:Black;
height:25px;
float:left;
    /* 
       The position of #bardivs must be something other than
       static (the default) so that its children will be positioned
       relative to it.
    */
    position:relative;
    width:2px;
}
.top-to-bottom {
    border-width:3px;
    border-left-width:0px;
    -webkit-border-image: 
    	-webkit-gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
    -webkit-border-image: 
    	-webkit-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
    -o-border-image:
    	     -o-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
    -moz-border-image:
    	   -moz-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;    
}
#progresstext {
    position:absolute;
    top:0;
    left:0;
    float:right;
    font-size:10px;
}
 .grad
{
background: -webkit-linear-gradient(left, #C8F5F7 ,#80E3E8,#2EC2C9,#3E7BDE,#1248A1,#0D3980,#0C2957,#071E42); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right,  #C8F5F7 ,#80E3E8,#2EC2C9,#3E7BDE,#1248A1,#0D3980,#0C2957,#071E42); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right,  #C8F5F7...

JavaScript

$("#t2").top = $("#t1").offset.top;
$("#t2").left = $("#t1").offset.left;

$( "#t2" ).animate(
    {
        width: 97
    }, 
    {
        duration: 3000,
        progress: function( animation, progress, remainingMs ) {
            $("#d").html("tone "+Math.round(progress*100, 2)+"%");
        },
        complete: function() {
            $( this ).after( "<div>Animation complete.</div>" );
        }
    }
);