JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<div class="progress">
    <div class="bar bar-success" style="width: 50%;"></div>
    <div class="bar bar-warning" style="width: 30%;"></div>
    <div class="bar bar-danger" style="width: 20%;"></div>
</div>

<div class="progress">
    <div id="myProgress" class="bar bar-danger"></div>
</div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

JavaScript

var bar = document.getElementById("myProgress");
var progress = 0;


function setProgress(percent){
    bar.style.width = percent + "%";
    
    if (percent > 90)
        bar.className = "bar bar-success";
    else if (percent > 50)
        bar.className = "bar bar-warning";
}
    
var interval = setInterval(
    function(){
        setProgress(++progress);
        if (progress == 100) window.clearInterval(interval);
    }, 100);