JSFiddle - React, Tailwind, and code Playground

by ronnjoe

HTML

<script src="http://code.jquery.com/ui/1.8.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.4/themes/smoothness/jquery-ui.css">
<div class="progressbarDashboard">
     <!--<div class="bar bar-grey" style="width: 35%;">35%</div>
    <div class="bar bar-amber" style="width: 20%;">20%</div>
    <div class="bar bar-red" style="width: 10%;">15%</div>
      -->
    <div class="progressLoaded" style="width: 5%;"></div>
    <div class="progressReadyLoad" style="width: 60%;"></div>
    <div class="progressTargetCapacity" style="width: 35%;"></div>
    
</div>

CSS

.progressbarDashboard{
    border-radius:5px;
    border:1px solid black;
}
.progressLoaded {
    background:#0066cc; 
    height:14px;
    -moz-border-radius:5px 0px 0px 5px;
    -webkit-border-radius:5px 0px 0px 5px; 
    -khtml-border-radius:5px 0px 0px 105pxpx; 
    border-radius:5px 0px 0px 5px;
}
.progressReadyLoad {
    background:red; height:14px;
    margin-top:-14px;
    -moz-border-radius:5px 0px 0px 5px; 
    -webkit-border-radius:5px 0px 0px 5px; 
    -khtml-border-radius:5px 0px 0px 5px; 
    border-radius:5px 0px 0px 5px;
    position: relative;
    z-index:-1
}
.progressTargetCapacity {
    background:green;
    height:14px;
    -moz-border-radius:0px 5px 5px 0px;
    -webkit-border-radius:0px 5px 5px 0px; 
    -khtml-border-radius:0px 5px 5px 0px; 
    border-radius:0px 5px 5px 0px; 
    float:right;
    margin-top:-14px;
    position: relative;
    z-index:-1
}

JavaScript

//Animated Progress bar
//$("#status2").animate( { width: "30%" }, 50);
//$("#status1").animate( { width: "80%" }, 50);
//$("#status").animate( { width: "30%" }, 50);

var result = (12 /60 ) * 100;
console.log(Math.round(result));