Full Stack Developer

Create a custom progress bar using html5

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.

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

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

var loading = function() {
 
}

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(function() {
    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.

var animate = setInterval(function() {
    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.

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

The following is the final output:

View Github Repository

About the author

Avatar
Mushfiqur Rahman

Full Stack Developer || Tech Geek || Music Enthusiast

Add Comment

Full Stack Developer

Mushfiqur Rahman

Avatar

Full Stack Developer || Tech Geek || Music Enthusiast

Get in touch

A profound honest Full Stack Developer with a passion for creating delicate solutions in the least amount of time, with more than seven years of experience in Web Application Development. Implemented complex user stories that make the business count on more conversion and grow with it. Started career with ASP.NET but eventually revamped skills with JavaScript, ReactJs, NodeJs and Ruby on Rails. Throughout my career, I have contributed to the businesses who have a positive impact on society through my active and innovative contributions to the growth of the organisation. While being an independently motivated engineer, I appreciate the collective efforts and collaborative productivity within the team environment. I am open-minded and focused on learning new technologies which have direct impacts on the betterment of human lives.