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/