JSFiddle - React, Tailwind, and code Playground

by Kirti Vishwakarma

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
	<div class="demo col-md-4">
				<h3 class="demo-header">Progress Bar Demo</h3>
				  <!-- Pb1 bar -->
					<div class='pb1'>
						<div class='display'>
							<div class="progress"></div>
						</div>
					</div>
					<!-- Pb2 bar -->
					<div class='clickable'>
						<div class='display'>
                          <span  id="percent">10</span>		<div id="progressDiv">
							    
							</div>
						</div>
					</div>
					<!-- Pb3 bar -->
					<div class='clickable'>
                        <div class='display'>
                             <span id="percent2"></span>
							<div id="bar"></div>
						</div>
					</div>
					<br>
					<select id="progressSelection">
                        <option value="0" >Select</option>
						<option value="1" >Progress-1</option>
						<option value="2">Progress-2</option>
						<option value="3" >Progress-3</option>
					</select>
					<!-- Pb1 buttons -->
                        <div id="pdBtn1"><h5>Click on first progress bar<h5></div>
						<!-- Pb2 buttons -->
						<div id="pdBtn2">
							<button class="btn-default pb2" id="decr">-10</button>
							<button class="btn-default pb2" id="incr">+10</button>
						</div>
					<!-- Pb3 buttons -->
						<div id="pdBtn3">
							<button id="start">Start</button>
							<button id="stop">Stop</button>
						</div>
						<br>
					
				

</div>

CSS

.demo{
    height:350px;
    
    background: #39cccc;
    margin:20px;
    padding:20px;
    border: 2px solid #000000;
}
.demo-header{
	text-align: center;
    Color:#fff;
    border: 1px solid #fff;
}
#bar {
    width:0px;
    height:36px;
    
    background-color:#72DFED;
    border-radius:3px;
}
.pb1,.clickable {
        border: 1px solid #fff;border-radius:1px;
    background: #188A96;
    height: 38px;
    width: 100%;
    position: relative;
    margin-bottom:5px;
}
.display {
    height: 16px;
    position: absolute;
    width: 100%;
}
.progress {
    position:absolute;
    left:0;
    top:0;
    background:#F7B45C;
    height:36px;
    width:10px;
}
 .ui-button-text{
	background-color: #367fa9;
	color: #444;
	border-color: #ddd;
   
    
}
#percent,#percent2 {
 position: absolute;   
 left: 50%;
    
    color:blue;
}

.ui-button-text-only .ui-button-text{color:#fff;}
#progressDiv{ 
background:#188A96;border:none;height:40px;
   }
.progressDataRecored{margin:0px;text-align: center;color:#200A8C;font-weight:bold;}
.ui-progressbar .ui-widget-header {
     color: Blue;
     background: #fff repeat-x 50% 50%;
  }
#pdBtn1,#pdBtn2,#pdBtn3{
    display:none;
    color:#fff;
}

JavaScript

$(document).ready(function () {
var elem = document.getElementById("progressSelection");
elem.onchange = function(){
    var hiddenDiv1 = document.getElementById("pdBtn1");
    hiddenDiv1.style.display = (this.value == "1") ? "block":"none";
    var hiddenDiv2 = document.getElementById("pdBtn2");
    hiddenDiv2.style.display = (this.value == "2") ? "block":"none";
     var hiddenDiv3 = document.getElementById("pdBtn3");
    hiddenDiv3.style.display = (this.value == "3") ? "block":"none";
};
//First progress bar
    $('.pb1').bind('click', function (ev) {
    var $div = $(ev.target);
    var $display = $div.find('.display');

    var offset = $div.offset();
    var x = ev.clientX - offset.left;

    $('.progress').width(x);
        
});
    //second progress bar
    $('button').button();
    $('#progressDiv').progressbar({
        value: 10,
        max: 100,
        create: function (e) {
            $('#progVal').text($('#progressDiv').progressbar("value"));
        },
        complete: function (e) {
            $('#incr').button("disable")
        },
        change: function (e) {
            if ($(this).progressbar("value") < 100) {
                $('#incr').button("enable")
                 
            }
            $('#percent').text($('#progressDiv').progressbar("value"));
                          

        }
    });
    $('.pb2').click(function (e) {
        var divElem = $('#progressDiv');
        var currentProgress = divElem.progressbar("value");
        divElem.progressbar("value",
        this.id == "decr" ? currentProgress - 10 : currentProgress + 10)
    })
     //Third progress bar
      var maxWidth = 455;
    var duration = 3000;
    var $log = $('#log');
    var $start = $('#start');
    var $stop = $('#stop');
    var timer;

    $start.on('click', function() {
        var $bar = $('#bar');
        Horloge(maxWidth);
        timer = setInterval('Horloge('+maxWidth+')', 100);

        $bar.animate({
            width: maxWidth
        },...