Javascript Progress Bar percentage Example

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.

Read Also:  how to convert minutes into seconds - 3 Ways to Convert Minutes to Seconds

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.

Read Also:  How to create an visitor counter with HTML & PHP?

<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/