LambdaTest Community

Find answers, support, and inspiration from other users

Questions
LambdaTest Community
Answered

How can I create a cross browser compatible HTML progress bar?

Can anyone please guide me on how can i create cross browser compatible HTML progress bar.

Up Vote Down Vote 0 Votes
Posted 4 months ago

Answers


One of the key elements of any modern website that you would have come across on the internet is an HTML progress bar. HTML5 progress elements have become a fundamental part of web design that is used for a wide array of tasks be it to display file download/upload status, file transfer,

registration, installation or any task which is in progress due for completion. However, coding an HTML progress bar which offers cross browser compatibility has posed a tricky challenge to developers since time immemorial. Instead of using div tags to create a progress bar, HTML5 provides an extremely ingenious way by the use of HTML5 < progress > tag. In this article, we will discuss what HTML5 progress element is, how to style it using CSS, how to animate it using JavaScript/jQuery, cross browser compatibility solutions for creating an HTML progress bar and finally fallbacks for unsupported browsers. Without further ado, here we go!

HTML5 < progress > Element

The semantic HTML5 < progress > element is used as an indicator to display the state of completion or progress of a task, i.e. the amount of work which is yet to be done. HTML5 < progress > element acts as a visual feedback demonstration for a user to keep tabs on the state of progress of the given task being undertaken. Usually, it is displayed in the form of a progress bar marked with numbers or percentage values.

Note: If you wish to display a gauge(disk space or storage), HTML5 progress element would not be the right choice. You should use HTML < meter > tag instead.

Syntax For Creating An HTML Progress Bar

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

The < progress tag > has 2 key attributes – value and max. These 2 attributes define how much part(value) of the total task(max) has been completed at present.

  • Value: value attribute indicates the amount of task that is completed, which is the current value. It can be any number between 0 to max attribute. In case max attribute is absent, the value can range from 0 to 1. In case, the value attribute is absent, then the HTML progress bar will be indeterminate. It will no longer indicate the current state of completion.
  • Max: max attribute represents the total amount of work necessary for completion of a task. Value of max cannot be less than 0 and by default is set to 1. Here is a simple demonstration of HTML progress bar using the HTML5 progress element –
<!DOCTYPE html>
<html>
 <head>
  <title>Progress Bar</title>
 </head>
 <body>
  <span>Progress:</span>
  <progress value="40" max="100"></progress>
 </body>
</html>

Indeterminate vs Determinate States Of HTML5 Progress Element

As we discussed above, a progress element can have 2 states – Indeterminate or Determinate. It all depends on whether the value attribute is mentioned inside the < progress > tag is mentioned or not. In case the value attribute is not specified then the result would be an indeterminate HTML progress bar which does not display the current state of progress. The opposite is true in the case of a determinate HTML progress bar.

Here is an example for both cases –

<!DOCTYPE html>

<html> <head> <title>Progress Bar</title> </head> <body> <span>Indeterminate Progress Bar:</span> <progress max="100"></progress> <br><br> <span>Determinate Progress Bar:</span> <progress value="35" max="100"></progress> </body> </html>

HTML5 Progress Element – Cross Browser Compatibility

CanIUse Cross Browser compatibility chart for HTML5 Progress element

As you can see above, the HTML5 Progress element is cross browser compatible across all major desktop and mobile browsers covering 97.45% of the Internet user base as of March 2019. The only major exception is IE9 and below versions. Later in the article, we will explore different ways to code necessary fallbacks to elevate our HTML progress bar cross browser compatibility by using a polyfill to add support for IE8-9.

Styling The HTML Progress Bar

Styling the HTML progress element is an extremely arduous task. The challenge here arises primarily because every single browser interprets the < progress > tag differently. Each of them uses its own specific pseudo-classes to style HTML progress bar. You can see in the figure below how various browsers render a basic HTML progress bar in a different manner. You need to add styling rules separately for each of the three browsers with different rendering engines –

  • Blink/Webkit Browsers – Google Chrome, Opera and Safari
  • Moz Browser – Mozilla Firefox
  • Internet Explorer

Up Vote Down Vote 0 Votes
Posted 3 months ago