The progress element represents the completion progress of a task. A progress element must have both a start tag (i.e. <progress>) and an end tag (i.e. </progress>).

Attributes:

It can have two attributes:

  • max – Indicates how much task needs to be done before it can be considered as complete. If not specified the default value is 1.0.
  • value – Indicates the current status of the progress bar. It must be greater than or equal to 0.0 and less than or equal to 1.0 or the value of the max attribute (if present).

The progress bar can look different in different browsers. Without applying any CSS, the progress bar looks like this in Chrome, Firefox and latest internet explorer version.

Example:
&lt;progress max="100" value="80">&lt;/progress>
1. Chrome
Chrome Progress bar
2. Firefox
Firefox Progress bar
3. Internet Explorer 11 and Microsoft Edge
IE Progress bar

You should note that only adding the max attribute doesn’t change the state of the progress bar because the browser still doesn’t know what value to represent.

This is pretty much all that we can do in HTML as rest of the work is done by CSS. At this stage let’s not worry about the fallback techniques for supporting older browsers that don’t understand the progress element.

CSS for progress bar element 

1.WebKit/Blink (Chrome/Safari/Opera)

To reset the default styles, we simply set -webkit-appearance  to none

CSS:

progress[value] {
  width: 300px;
  height: 14px;
  margin: 50px auto;
  display: block;
  /* Important Thing */
  -webkit-appearance: none;
  appearance: none;
  border: none;
}

WebKit/Blink provides two pseudo-classes to style the progress element:

  • -webkit-progress-bar:

It is the pseudo-class that can be used to style the progress element container. In this example, we will change the background color, border-radius and box shadow to the progress element container.

  • -webkit-progress-value:

It is the pseudo-class to style the value of the progress bar. Default background-color is green which can be verified by inspecting the user-agent stylesheet. For this example, we will create a stripe pattern effect using linear-gradient on a background-image property.

CSS:

/* Now style the background */

progress[value]::-webkit-progress-bar {
  background-color: lightgray;
  border-radius: 50px;
  box-shadow: 0 1px 0px 0 rgba(255, 255, 255, 0.2);
}
Progress Bar

Next, we will style the -webkit-progress-value (the bar) with multiple gradient backgrounds. One for striping, one for the top to bottom shadowing, and one for a left to right color variation.

CSS:

progress[value]::-webkit-progress-value {
  border-radius: 50px;
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.5);
  background-image: -webkit-linear-gradient(45deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255, 255, 255, .5), rgba(0, 0, 0, .3)), -webkit-linear-gradient(left, #673ab7, #6518ef);
  /* with stripe pattern*/
  background-size: 25px 14px, 100% 100%, 100% 100%;
}
Progress-bar-with stripe-pattern

2. Firefox

Firefox uses -moz-appearance:none; to style the progress element.

Firefox provides a single pseudo class -moz-progress-bar.  We can use to target the progress bar value. This means that we cannot style the background of the container in Firefox.

CSS for firefox:

progress[value] {
  width: 300px;
  height: 14px;
  margin: 50px auto;
  display: block;
  /* Important Thing */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
}

/* value part */

progress[value]::-moz-progress-bar {
  border-radius: 50px;
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.5);
  background-image: -webkit-linear-gradient(45deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255, 255, 255, .5), rgba(0, 0, 0, .3)), -webkit-linear-gradient(left, #673ab7, #6518ef);
  /* with stripe pattern*/
  background-size: 25px 14px, 100% 100%, 100% 100%;
}

without using progress tag :

I preferred this type of code because the progress bar runs fine in all browsers. The progress bar color is blue in all the versions of Internet Explorer.

Here I give you a simple example of animating progress bar.

HTML:

&lt;div class="progress-bar"> &lt;span class="progress-value" style="width: 55%;">&lt;/span> &lt;/div> &lt;span>&lt;strong>JAVASCRIPT&lt;/strong>&lt;/span> &lt;br/>
&lt;div class="progress-bar"> &lt;span class="progress-value yellow" style="width: 70%;">&lt;/span> &lt;/div> &lt;span>&lt;strong>HTML&lt;/strong>&lt;/span> &lt;br/>
&lt;div class="progress-bar"> &lt;span class="progress-value green" style="width: 90%;">&lt;/span> &lt;/div> &lt;span>&lt;strong>CSS&lt;/strong>&lt;/span> &lt;br/>

CSS:

.progress-bar {
  background-color: lightgray;
  border-radius: 1.25em;
  width: 300px;
  height: 16px;
  display: inline-block;
}

.progress-value {
  background-color: #673ab7;
  transition: 0.3s all linear;
  border-radius: 1.25em;
  height: 16px;
  display: inline-block;
}
Adding Animation:

Here I have added animation to a progress bar and use this animation on the progress-value selector itself.

CSS:

@keyframes progress {
  from {
    width: 0;
  }
  to {
    width: 55%;
  }
}

@-webkit-keyframes progress {
  from {
    width: 0;
  }
  to {
    width: 55%;
  }
}

@keyframes progress-2 {
  from {
    width: 0;
  }
  to {
    width: 70%;
  }
}

@-webkit-keyframes progress-2 {
  from {
    width: 0;
  }
  to {
    width: 70%;
  }
}

@keyframes progress-3 {
  from {
    width: 0;
  }
  to {
    width: 90%;
  }
}

@-webkit-keyframes progress-3 {
  from {
    width: 0;
  }
  to {
    width: 90%;
  }
}
/* animation */

.progress-value {
  background-color: #673ab7;
  transition: 0.3s all linear;
  border-radius: 1.25em;
  height: 16px;
  display: inline-block;
  animation: progress 3s ease-in-out forwards;
  -webkit-animation: progress 3s ease-in-out forwards;
}

.progress-value.green {
  background-color: #4CAF50;
  animation: progress-3 3s ease-in-out forwards;
  -webkit-animation: progress-3 3s ease-in-out forwards;
}

.progress-value.yellow {
  background-color: #ff9800;
  animation: progress-2 3s ease-in-out forwards;
  -webkit-animation: progress-2 3s ease-in-out forwards;
}

You can check here for the result of above code. 

Progress-bar with label:

Here I give you another example of animating progress-bar with the label. In the below example I am using some javascript code for a percentage value change dynamically.

HTML:
&lt;div class="progress-bar">
  &lt;div id="bar" class="progress-value" style="width: 1%;"> &lt;span id="value">1%&lt;/span> &lt;/div>
&lt;/div>
CSS:
.progress-bar {
  background-color: lightgray;
  border-radius: 1.25em;
  width: 300px;
  height: 16px;
  display: inline-block;
}

.progress-value {
  color: #fff;
  text-align: center;
  background-color: #673ab7;
  transition: .3s all linear;
  border-radius: 1.25em;
  height: 16px;
  display: inline-block;
}

If you want to dynamically update the text inside the label to the same value of the width of the progress bar, add the following:

Javascript:
var elem = document.getElementById("bar");
var width = 1;
var id = setInterval(frame, 100);

function frame() {
  if (width >= 100) {
    clearInterval(id);
  } else {
    width++;
    elem.style.width = width + '%';
    document.getElementById("value").innerHTML = width + '%';
  }
}

You can check here for the result of the above example.

Here I explain basic progress-bar using CSS, HTML, and javascript and you can see another example of the animated progress-bar (circular water fill loading animation.)