Home » HTML5 » HTML5 – Styling a Progress Bar

About Fahd Shariff

Fahd Shariff
Fahd is a software engineer working in the financial services industry. He is passionate about technology and specializes in Java application development in distributed environments.

HTML5 – Styling a Progress Bar

The progress tag introduced in HTML5 can be used to represent the progress of a task.

For example, the following code:

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

displays: Unsupported browser

Different browsers display the progress bar in different styles:

Changing the colour of the progress bar:

Now let’s say that you wish to change the colour of the progress bar so that it is red if the value is less than the maximum and green when it equals the maximum. In order to do this, you can use the following CSS, which should work in Chrome, Firefox and IE:

CSS

progress[value]  {
  -webkit-appearance: none;

  width: 200px;
  height: 20px;

  /* remove border in Firefox */
  border: none;

  /* IE */
  color: red;
}

/* Chrome */
progress[value]::-webkit-progress-bar {
  background-color: #eee;
}

progress[value]::-webkit-progress-value {
  background-color: red;
}

progress[value="100"]::-webkit-progress-value  {
  background-color: green;
}

/* Firefox */
progress[value]::-moz-progress-bar {
  background-color: red;
}

progress[value="100"]::-moz-progress-bar  {
  background: green;
}

/* IE */
progress[value="100"]  {
  color: green;
}

HTML



Result

Creating a progress bar without HTML5:

If, like me, you would rather not have browser-specific CSS, then another approach is to create a progress bar without using the HTML5 progress tag. This is quite easy, as demonstrated here:

CSS

.progress-bar {
  background: linear-gradient(to bottom, #ddd, #eee 20%, #ccc 45%, #ccc 55%, #ddd);
  width: 200px;
  height: 20px;
}

.progress-bar > span {
  background: linear-gradient(to bottom, #f77, #fcc 20%, #d44 45%, #d44 55%, #f77);
  height: 100%;
  display: block;
}

.progress-bar > span[style="width: 100%;"] {
  background: linear-gradient(to bottom, #ad7, #cee 20%, #7a3 45%, #7a3 55%, #ad7);
  height: 100%;
  display: block;
}

HTML

Result

Published on Web Code Geeks with permission by Fahd Shariff, partner at our WCG program. See the original article here: HTML5 – Styling a Progress Bar

Opinions expressed by Web Code Geeks contributors are their own.

(0 rating, 0 votes)
You need to be a registered member to rate this.
Start the discussion Views Tweet it!
Do you want to know how to develop your skillset to become a Web Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. Building web apps with Node.js
2. HTML5 Programming Cookbook
3. CSS Programming Cookbook
4. AngularJS Programming Cookbook
5. jQuery Programming Cookbook
6. Bootstrap Programming Cookbook
and many more ....
I agree to the Terms and Privacy Policy
Subscribe
Notify of
guest
The comment form collects your name, email and content to allow us keep track of the comments placed on the website. Please read and accept our website Terms and Privacy Policy to post a comment.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments