Full Stack Developer, Tech Geek, Audiophile, Cinephile, and Lifelong Learner!

Create a custom progress bar using html5

C

CREATE A CUSTOM PROGRESS BAR USING HTML5 | Mushfiqur’s Blog

CREATE A CUSTOM PROGRESS BAR USING HTML5 | Mushfiqur’s Blog

A new element was introduced in HTML5 which adds the progress-bar feature to native HTML. It allows us to show the progress of certain tasks, like uploads or downloads, basically anything that is in progress. In this post, we are going to customize and style the progress-bar with animation.

A new element <progress> was introduced in HTML5 which adds the progress-bar feature to native HTML. It allows us to show the progress of certain tasks, like uploads or downloads, basically anything that is in progress. In this post, we are going to customize and style the progress-bar with animation.

The basics of HTML5 element

It’s very simple to use the new element for progress-bar. This element can be added using <element> tag in the code. This element has three attributes, <value>, <min> and <max>. Sample HTML as follows:

<progress value="10" max="100"></progress>

Since this is a native HTML progress-bar element, the presentation varies depending on the platform. Below is how a native progress bar looks in Windows and macOS.

Now, let’s start to customize the style of this progress bar, so it has a consistent or similar look across all platform.

Customize the style

In the CSS, we actually can use the element selector to target and add style rules of our own to customize the look of <progress> element. In this example, we change the background color, remove the borderline, and make it rounded by adding a border-radius at half of its height.

progress {
  background-color: #f3f3f3;
  border: 0;
  height: 18px;
  border-radius: 9px;
}

Now, we have another problem. Each browser handles this CSS bit differently. So we need to figure out a way to make it looks like the same everywhere.

In Firefox, the styles affect the progress bar, while the progress meter/value is not affected.

In Chrome and Safari, it will remove the native styles and presentation from the platform and replace it with the Webkit stylesheet, the styles above will not be applied (at least, at the moment).

So, we need some more workaround in these cases.

In Chrome and Safari, the progress-bar element is translated this way.

<progress>
    ┗ <div> ::-webkit-progress-bar
         ┗ <div>::-webkit-progress-value

Thus, to change the progress bar and the progress value styles in these browsers, we need to add those Webkit pseudo-classes.

progress::-webkit-progress-bar {
  /* style rules */
}
progress::-webkit-progress-value {
  /* style rules */
}

Firefox also has its special pseudo-class that is ::-moz-progress-bar. Unlike Chrome and Safari, this pseudo-class in Firefox refers to the progress meter/value.

progress::-moz-progress-bar {
  /* style rules */
}

To conclude, these are currently the entire selectors for styling HTML5 progress bar.

progress {
  /* style rules */
}
progress::-webkit-progress-bar {
  /* style rules */
}
progress::-webkit-progress-value {
  /* style rules */
}
progress::-moz-progress-bar {
  /* style rules */
}

Animating the progress bar

Next, we will see how to animate the progress bar. Typically, the progress bar expands from left to right as the task progresses.

The idea is, the progress bar will expand from 0 and stop once it reaches the maximum value. We will also display the value number as it is progressing. Below is the HTML structure.

HTML

<progress id="progressbar" value="0" max="100"></progress>

In this example, we will use jQuery to animate the progress bar. So, we should also not forget to insert the jQuery, like so.

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

Then, we add the scripts to make the progress bar expand. First, we store the progress bar element, the progress bar value as well the maximum value, and the timeframe, in Variables.

let progressbar = $('#progressbar');
let max = progressbar.attr('max');
let time = (1000 / max) * 5;
let value = progressbar.val();

Next, we create a variable that stores the animation function. In this example, we call the variable loading.

const loading = () => {

};

Inside the function, we set the progress interval. We will increase the value by 1 per timeframe — you can increase the value to make the progress run faster.

value += 1;

And then, we add the result to the progress bar.

addValue = progressbar.val(value);

We also show the value inside, next to the progress bar.

$('.progress-value').html(value + '%');

Next, we create a new function to run the animation function.

setInterval(() => loading(), time);

At this point, the animation is already functioning. However, the value will keep increasing infinitely. So, we need to create a conditional statement for the animation to stop when it reaches its maximum value.

First, let’s store the above function in a variable like so.

const animate = setInterval(() => loading(), time);

And, inside the loading variable, we add the conditional statement, as follow.

if (value == max) {
    clearInterval(animate);
}

The above script states that once the value is equal to the maximum value, clear the interval, which will stop the animation function.

That’s it and here are all the codes to animate the progress bar.

$(() => {
	let progressbar = $('#progressbar');
	let max = progressbar.attr('max');
	let time = (1000 / max) * 5;
	let value = progressbar.val();
	const loading = () => {
		value += 1;
		progressbar.val(value);
		$('.progress-value').html(value + '%');
		if (value == max) {
			clearInterval(animate);
		}
	};
	const animate = setInterval(() => loading(), time);
});

The following is the final output:

custom progress bar using html5
View Github Repository
Share on:

1 Comment

  |     |  
Full Stack Developer, Tech Geek, Audiophile, Cinephile, and Lifelong Learner!