Javascript Progress Bar percentage Example
Today, We want to share with you Javascript Progress Bar percentage Example.
In this post we will show you Create a Simple Progress Bar With Javascript, CSS and HTML, hear for javascript – Progress bar with duration and percentage we will give you demo and example for implement.
In this post, we will learn about javascript progress bar with percentage with an example.
A simple php example using JavaScript of creating a Line (line bar) shaped progress bar display and animating(different type color) it from 0% to 100% progress.
In this post(javascript using progressbar) we are going to new create (Line shaped) flat styled progress bars to present your any level like(skill,ratio.etc..) & experiences all skill by using pure CSS html with javascript.
How to use it:
Create the javascript for the Line bars css or html.
#fileprogressdata{
position: relative;
width: 100%;
height: 30px;
background-color: #bbb;
}
#filebar{
position: absolute;
width: 1%;
height: 100%;
background-color: #4bCF80;
}
<h1>Progress Bar Progressive Javascript Events Processing</h1> <div id="fileprogressdata"> <div id="filebar"></div> </div> <br> <button name="progressbarexample" onclick="profmovepbar()">Progress - Click Me</button>
function profmovepbar() {
var elemetdata= document.getElementById("filebar");
var width = 1; //init mode set width
var id = setInterval(frame, 10); //set interval
function frame() {
if (width >= 100) {
clearInterval(id); //clearInterval
} else {
width++; //looping interval
elemetdata.style.width = width + '%'; //set width
}
}
}
Full Example : Progress Bar Progressive Javascript Events Processing
<!DOCTYPE html>
<html>
<style>
#fileprogressdata{
position: relative;
width: 100%;
height: 37px;
background-color: #bbb;
}
#filebar{
position: absolute;
width: 1%;
height: 100%;
background-color: #4bCF80;
}
</style>
<body>
<h1>Simple JavaScript Progress Bar Example</h1>
<div id="fileprogressdata">
<div id="filebar"></div>
</div>
<br>
<button onclick="profmovepbar()">Progress - Click Me</button>
<script>
function profmovepbar() {
var elemetdata= document.getElementById("filebar");
var width = 1; //init mode set width
var id = setInterval(frame, 10);//set interval
function frame() {
if (width >= 100) { //set width
clearInterval(id);//clearInterval
} else {
width++; //looping interval
elemetdata.style.width = width + '%'; //set width
}
}
}
</script>
</body>
</html>
Bootsrep How to make a progress bar
Now we can do it by progressbar controlling set width of a html tag div via css with html.
<div id="container" style="width:100%; height:53px; border:2px solid black;">
<div id="progress-bar" style="width:56%;/* any time change this width and check */
background-image:url(yourimagesrootdirget.png);
height:46px;">
</div>
</div>
Example 0 : http://jsfiddle.net/DgXM6/3/
Example 1 :http://jqueryui.com/progressbar/