How to use HTML5 Progress bar

1 min


HTML5 comes with progress bar tag which is useful to many occasions. Progress bar element is used in multiple occasions when a status of a certain task, activity is needs to be shown on a web page without server interaction. This tutorial will show a very basic implementation of html5 progress bar operation – defining, setting its value so that a progress can be shown.

Defining a progress bar

To define a progress bar, you need to use tag of HTML5. While defining, you can specify its max value and default value.

Increase and Reset

Now, we would use a simple increment logic in JQuery to increase the progress and when its reaches the maximum value, reset its value and start over. Lets define a function.

function updateProgress(){
incr = incr +1;
if (incr>max) { incr=1;}
$("#pg1").val(incr);
$("#status").html(" "+incr+" %");
}

You can set the progress bar current value using val(value) method.

So, we are done working on the logics.

Here is a demo of this tutorial: View Demo

Download the code here: Download Code

Complete Code:

[code lang=”js” htmlscript=”true”]
<!DOCTYPE html>
<html>
<HEAD>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</HEAD>

<body>
<div>
<progress value="22" max="100" id="pg1"></progress><span id="status"></span>
</div>
<p><strong>Note:</strong> The progress tag is not supported in Internet Explorer 9 and earlier versions.</p>
</body>

<script>
$(document).ready(function(){
//Define a max value 100
var max=100;
var incr=1;

// Call this function to increment the progress bar value
function updateProgress(){
incr = incr +1;
if (incr>max) { incr=1;}
$("#pg1").val(incr);
$("#status").html(" "+incr+" %");
}

// Update the progress bar per 100 ms
setInterval(updateProgress,100);

});
</script>
</html>
[/code]

Drop a comment if you find this tutorial useful.

SEE ALSO:   How to Install Fonts in Ubuntu to be used in Gimp, LibreOffice


We bring the latest tech, software news and stuff that matters. Stay in touch via Telegram, Twitter, YouTube, and Facebook and never miss an update!

Join our Telegram channel and stay informed on the move.

Also Read


Like it? Share with your friends!

Arindam

Creator of debugpoint.com. All time Linux user and open-source supporter. Connect with me via Telegram, Twitter, LinkedIn, or send us an email.
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x