CREATE A CUSTOM PROGRESS BAR USING HTML5

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.

THE BASICS OF HTML5 ELEMENT

It’s very simple to use the new element for progress-bar. This element can be added using tag in the code. This element has three attributes, , and . 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 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.

THE 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.
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.

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

And the final code is:

$(() => {
    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);
});

Final Output

Read the full article on mushfiqweb.com

CREATE A CUSTOM PROGRESS BAR USING HTML5