Designing a Progress Bar Using HTML5

html5 progress bar

Psd2Joomla.info

With HTML5 dominating the web development world and inspiring webmasters globally, a significant outburst can be seen in the way it gains ascendancy over every aspect of website design. As progress bars are gaining prominence to show the user occurrence of an event, HTML5 serves as a decisive factor to create and animate them in the manner most effective. Progress bars are great to display the progress of any specific task, such as downloads, uploads, or anything that is related to any progress. It’s a nice way to give your visitors a feeling that their request has been heard and it’s in way of processing.

This post discusses about the complete process of creating and styling a progress bar element with the help of HTML5.

So, let’s start!

Learning the basics

The progress bar is rendered using <progress> tag which is later styled with CSS3. First, we need to determine the value of our progress bar using ‘value’, ‘min’, and ‘max’ attributes, just like this:

<progress value=”9″ max=”90″></progress>

Based on browser and operating system, progress bar can be rendered differently. Below is the progress bar of Windows and OSX.

progress bar

 

If you are particular regarding the visual appeal of your progress bar, then here is a good news for you. Yes, you can actually style your <progress> tag and give it a “wow” factor. Let’s move further to know how all that styling can be done.

Styling Progress Bar

Styling progress bar isn’t an uphill battle at all. Just pick up the element selector to add styling effects to the <progress> element. In the following example, we have changed the background color and remove the border line.

progress {

background-color: #f3f3f3;

border: 0;

height: 16px;

border-radius: 8px;

}

As already mentioned above, each operating system and browser take it in an entirely different manner.

Firefox reflects the styling of progress bar without affecting the progress meter/value.

In Safari and Chrome, the native style and presentation will be replaced with the Webkit stylesheet.

progress bar html5

The following code snippet will help you translate progress bar in Chrome and Safari

<progress>

<div> ::-webkit-progress-bar

<div>::-webkit-progress-value

Webkit stylesheet is the pseudo element that is used to style the progress element. In the following demo, we’ll change the progress bar and the progress value styles in the browsers.

progress::-webkit-progress-bar {

/* style rules */

}

progress::-webkit-progress-value {

/* style rules */

}

Firefox comes with its own pseudo-class known as -moz-progress-bar. This is how it can be translated.

progress::-moz-progress-bar {

/* style rules */

}

Time for Some Animation

In this section, we’ll focus on how to animate a progress bar. A typical progress bar moves from left to right as the event progresses.

For a standard progress bar, it’s crucial to kickstart from 0 and reach 100 till the progress completes or reaches any predetermined maximum value. Below is the HTML structure.

HTML

<progress id=”progressbar” value=”0″ max=”90″></progress>

CSS

Now, it’s time for some jQuery magic. We will use it to complete our animation process. So, insert it like this:

<script src=”js/jquery.js” type=”text/javascript”></script>

After this, we can use some scripts so that our progress bar can expand easily. For this, simply save the progress bar element along with attributes, including the progress bar value, maximum value, and timeframe, in the form of Variables.

var progressbar = $(‘#progressbar’),

max = progressbar.attr(‘max’),

value = progressbar.val(),

time = (1000/max)*5;

After this, we need to create the variable to handle the animation function. In the following example, “loading” is the name of our variable.

var loading = function() {

}

You can see that we have set the progress interval. Now, this value can be increased by 1 per timeframe- you can set any value depending upon how fast you want progress bar to run.

Value += 1;

Next, a result can be embedded to the progress bar.

addValue = progressbar.val(value);

We also add a value inside next to the progress bar.

$(‘.progress-value’).html(value + ‘%’);

Lastly, we create and add a new function to execute the animation function.

setInterval(function() {

loading();

}, time);

As of now we have successfully created a fully-functional progress bar with some awesome animation effects. But, there is a problem here. What? We haven’t added any conditional statement to our value yet to stop the animation till it reaches the maximum value.

For this, we need to store the above function in a variable just like this:

var animate = setInterval(function() {

loading();

}, time);

Then insert the conditional statement with the loading element.

if (value == max) {

clearInterval(animate);

}

Now, the animation will stop automatically as soon as the value becomes equivalent to the maximum value.

You’re done!

So, this was the entire process of creating a progress bar with the help of HTML5. I hope you find the tutorial helpful. Do not forget to add it as your bookmark in case you need it in future.


 

Author Bio

Jack Calder is a magnificent conversion service provider of converting PSD to HTML5 in very less time with impeccable results. Jack has done a lot of research on the progress bar of html5 also and has shared here his opinion.

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *