App & Browser Testing Made Easy

Give your users a seamless experience by testing on 3000+ real devices and browsers. Don't compromise with emulators and simulators

Get Started free
Home Guide How to create a Cross-browser Compatible HTML Progress Bar?

How to create a Cross-browser Compatible HTML Progress Bar?

By Tom Collins, Community Contributor -

As part of one of the elements of modern web design, an HTML Progress Bar plays an important role, and almost every website adds progress bars for downloading, uploading, installation, filling forms, checkout process, and other components that require progress indication. It builds user engagement with users and displays task progress. 

However, there’s a challenge of having an HTML5 progress bar on websites, i.e., cross-browser compatibility issues. In this guide, we’ve covered everything about HTML Progress Bar, its elements, the best way to style it using CSS, and solutions for cross-browser compatibility issues in the progress bar. 

Introduction to HTML Progress Bar

The HTML Progress Bar is an element that is used in websites to display any tasks progress like download/upload, checkout process, registration form, etc. It is one of the effective ways to build engagement with users and increase conversions because users can see the real-time progress of their tasks. 

To add a progress bar on HTML based website, web developers implement this syntax:

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

HTML Progress Bar Attributes

Attributes are used to understand the behavior of the elements in HTML. In the progress bar, there are mainly two types of attributes:

  • Max: It indicates the total number of work that must be completed, and its default value is 1. 
  • Value: It specifies how much work has to be finished. Its default value is one, and the absence of the Value attribute can make the progress bar indeterminate. 

These are the two most important attributes that must be understood while building HTML Progress Bar. 

HTML Progress Bar Attributes

Attributes are used to understand the behavior of the elements in HTML. In the progress bar, there are mainly two types of attributes:

  • Max: It indicates the total number of work that must be completed, and its default value is 1. 
  • Value: It specifies how much work has to be finished. Its default value is one, and the absence of the Value attribute can make the progress bar indeterminate. 

These are the two most important attributes that must be understood while building HTML Progress Bar. 

How to Create a Progress Bar in HTML?

When web developers create a Progress Bar, they’ve two options, i.e., determinate and indeterminate. If a developer wants to build an indeterminate progress bar, then keep the value attribute null. Otherwise, to create a determinate progress bar, max and value attributes must be assigned. 

Let’s understand with an example to create a determinate Progress Bar in HTML by assigning numbers of Max & Value attributes:

<!DOCTYPE html>
<html>
<body>
Downloading the process:
<progress value="19" max="90">
</progress>
<p><strong>Note:</strong> The progress tag is used to represent a progress bar for quite a period of time. </p>
</body>
</html>

This syntax allows developers to create the basic progress bar in HTML:

ProgressBar1

Now, it’s time to do some customization and style the HTML Progress Bar. 

If you want to enhance the look of the HTML Progress Bar and make it modern, just follow the step-by-step process to style the HTML Progress Bar:

1. Using CSS

CSS frameworks are the most preferred choice for developers to make their HTML elements beautiful and stylish. As per the given syntax, the progress bar is in a basic format, but CSS allows adding dimensions like width & height to the progress bar, enhancing its visibility and making it more stylish. To add dimensions, developers should use this given syntax: 

<!DOCTYPE>
<html>
<head>
<h1> Using Style Sheet in Progress bar </h1>
<style>
progress{width:400px;height:40px}
</style>
</head>
<body>
<progress value="60" max="100"></progress>
</body>
</html>

By using this HTML5 progress bar CSS syntax, the output is a more presentable version of the same.

ProgressBar2

2. Using Box Shadows and Colors

Now, it’s time to make the progress bar colorful with eye-catching shadow effects. As a web developer, progress bars can be more attractive by adding background color and assigning heights with different colors. 

  • To add colors to the progress bar, use the rgna() function and display different colors in the progress bar to make it more stylish and attractive. 
  • The progress bar moves from left to right to complete the process and add this function, the “class” attribute used in HTML. 

Let’s add background colors, shadow, heights, and left-to-right progress functions by using this syntax:

<!DOCTYPE>
<html>
<head>
<h1> Using Style Sheet in Progress bar demo </h1>
<style>
progress{width:200px;height:20px;background-color:pink;
border-radius: 4px;position: absolute;
right: 0px;
top: 80px;
box-shadow: 0 3px 6px rgba(255, 255, 0, 255) inset;}
</style>
</head>
<body>
<progress value="40" max="100"></progress>
</body>
</html>

ProgressBar3

Note: As we’ve discussed, the HTML5 progress bar comes with cross-browser compatibility issues, which is why the developers need to build & style the HTML5 progress bar CSS  in different platforms for different browsers:

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

To ensure that a browser progress bar supports all the different browsers, developers need to use render engines.

3. Using Span

Span is used to define the amount of progress in the HTML progress bar. Here’s the indeterminate syntax of the progress bar:

<!DOCTYPE>
<html>
<head>
<h1> Using Style Sheet in Progress bar </h1>
<style>
progress{width:120px;height:20px}
</style>
</head>
<body>
<progress max="100">
<span>20</span>%
</progress>
</body>
</html>

ProgressBar4

4. Using JavaScript

Once you know how to build & style HTML browser progress bars, then it’s time to enhance the progress bar look with the help of JavaScript or jQuery. Using Javascript or jQuery, developers can look at the progress bar motion from left to right in increments. To enhance HTML Progress Bar, a new variable is required called “Progress,” and some values are assigned for “Max” & “Value,” both attributes.

So the concept is that as long as the variable “progress” is less than the max attributes, the “progress” variable keeps getting incremented to the max defined value. 

Here’s the Syntax to enhance Progress Bar in HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<title>implementation of HTML progress Tag</title>
</head>
<body>
<h2> <i>Task in scheduled Progress </i></h2>
<p>Process: <progress id="bar" value="1" max="100"><span>0</span>%</progress></p>
<script type="text/javascript">
var k = 0;
var progb = document.getElementById("bar");
function count(){
if(k < 100){
k = k + 1;
progb.value = k;
progb.getElementsByTagName("span")[0].textContent = k;
}
setTimeout("count()", 400);
}
count();
</script>
</body>
</html>

By using this syntax, developers can make the animating HTML Progress Bar:

How to create a Cross-browser Compatible HTML Progress Bar?

Cross-Browser Compatibility Issues in HTML Progress Bar

According to statistics, 5.34 billion people use smartphones worldwide and access websites through their mobile browsers. The HTML progress bar comes with a flaw in cross-browser compatibility that can be resolved by building the progress bar on supportive render engines.

Once the progress bar is completed and added to the website, testers need to check whether the progress bar is compatible with all browsers. Use Caniuse for HTML5 Features to understand if the progress bar is supported by various browser versions as shown below.

Screenshot 2022 09 20 at 4.01.59 PM

Going ahead, this is where BrowserStack Live assists QA testers to test the progress bar compatibility on different browsers.

Follow this simple process to test Progress Bar with BrowserStack Live:

Select any browser and version you need to test the progress bar.

Live Dashboard

Now, input the URL of the HTML-based website where the new HTML progress bar is added. 

HTML URL

Test the compatibility of the HTML progress bar by switching to different browsers.

Conclusion

Creating a basic HTML5 progress bar is easier for developers, but making it modern, attractive, and handling cross-browser compatibility makes creating an HTML progress bar challenging for developers.  

By following the above syntax, developers can build a modern & cross-compatible HTML5 progress bar that builds user engagement. 

With BrowserStack Live, QA testers can access 3,000+ cloud-based real devices and browsers and test the progress bar for cross-browser compatibility interactively. Just sign-up with a free account in BrowserStack, choose any browser and test the progress bar.

Test HTML Progress Bar on BrowserStack

How to create a Cross-browser Compatible HTML Progress Bar?

Tags
Cross browser testing Website Testing

Featured Articles

How to test Browser Compatibility for HTML5

How to Test HTML Code in a Browser?

App & Browser Testing Made Easy

Seamlessly test across 20,000+ real devices with BrowserStack