Progress Bar
<style>
*{box-sizing:border-box;}
#progressbar {
width: 100%;
height: 28px;
background-color: #f3f3f3;
text-align: center;
line-height: 28px;
}
#pbar {
width: 1%;
height: 100%;
background-color: #cddc39;
color:white;
}
</style>
<script src="jquery.min.js"></script>
<div id="progressbar">
<div id="pbar"></div>
</div>
<script>
var w=0;
$("#progressbar").click(function pbar(){
if(w<100) {
w++;
$("#pbar").css("width",w+"%").text(w+"%");
setTimeout(pbar,30);
}
});
</script>
Click!
<style>
*{box-sizing:border-box;}
#progressbar {
width: 100%;
height: 28px;
background-color: #f3f3f3;
text-align: center;
line-height: 28px;
}
</style>
<script src="jquery.min.js"></script>
<div id="progressbar"></div>
<script>
var w=100;
$("#progressbar").css("background","linear-gradient(to right,#29b6f6 "+w+"%, #f3f3f3 0%)");
$("#progressbar").click(function pbar(){
if(w>-1) {
$("#progressbar").css("background","linear-gradient(to right, #29b6f6 "+w+"%, #f3f3f3 0%)");
$("#progressbar").text(w+"%");
w--;
setTimeout(pbar,30);
}
});
</script>
Click !
<style>
*{box-sizing:border-box;}
#cbar {
border: 14px solid #f3f3f3;
border-radius: 50%;
width: 111px;
height: 111px;
text-align:center;
padding:27px 0;
display: inline-block;
margin-top:8px;
}
</style>
<script src="jquery.min.js"></script>
<div id="cbar">Click !</div>
<script>
var w=0;
$("#cbar").click(function cbar(){
if(w<100) {
w++;
$("#cbar").css("background","linear-gradient(to top, #29b6f6 "+w+"%,white 0%)");
$("#cbar").text(w+"%");
setTimeout(cbar,30);
}
});
</script>
Click !
<style>
*{box-sizing:border-box;}
#cbar {
border: 14px solid #f3f3f3;
border-radius: 50%;
width: 111px;
height: 111px;
text-align:center;
padding:27px 0;
display: inline-block;
margin-top:8px;
}
</style>
<script src="jquery.min.js"></script>
<div id="cbar">Click !</div>
<script>
var w=0;
$("#cbar").click(function cbar(){
if(w<100) {
w++;
$("#cbar").css("background","radial-gradient(circle,#29b6f6 "+(w*.75)+"%,white 0%)");
$("#cbar").text(w+"%");
setTimeout(cbar,30);
}
});
// (w*.75) means border occupies approx 25% of the width (28px in 111px).
// so we calculate 100% progress in 75% of the width
</script>