Home / Articles / Programming languages / Markup languages / HTML & CSS / How to use and style progress element in HTML5

How to use and style progress element in HTML5

How to use and style progress element in HTML5
 
How to use and style progress element in HTML5
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


In HTML5, there is a new element - progress which acts as a regular progress bar and is used to visualize the progress completion of a certain task such as data download on a server.

In this article an example is examined on how to add such elements on a page and style them; also this article shows a method that changes values of such elements using JavaScipt.

Adding progress bar on a page

To add progress bar on a page, the progress element must be used. Values of the progress bar must be defined by value and max attributes in progress element. Here is an example:

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

Since the base implementation uses standard forms, the visual representation dependents on the platform. Below is an example of how the progress bar looks in Windows 7.

Progress bar in Windows 7

As was mention above, progress element is a regular progress bar in HTML5 and simply speaking it represents a progress of a task where max attribute specifies how much work the task needs in total and value attribute specifies how much of the task has been made.

Browser support: Chrome 8+, Firefox 16+, IE 10+, Opera 11+, Safari 6+.

Styling progress bar

Now let's define styles for the progress bar, that is, to make it look the same on any platform.

To add styles for the progress element, we simply use the element selector. In an example below we change background color, remove borders and make corners rounded.

progress {
  background-color: #00FEFD;
  border-radius: 10px;
  border: 0;
  height: 20px;
  width: 200px;
}

But, there is a problem, every browser renders styles a bit differently:

  • In Firefox, styles only affect the progress bar while the progress indicator, which shows the current value, is not affected.
  • In Chrome and Safari, styles are not applied, except Webkit ones.

Appearance

Browser

Progress bar in Chrome

Chrome

Progress bar in Firefox

Firefox

Progress bar in IE

IE

Progress bar in Opera

Opera

Progress bar in Safari

Safari

So, in Chrome and Safari the appearance of the progress element can be changed with the help of pseudo-classes: -webkit-progress-bar and -webkit-progress-value.

The first one can be used to define styles for the progress bar and the second one for the progress indicator (the current value of the progress completion).

rogress::-webkit-progress-bar {
  /* styles */
}

progress::-webkit-progress-value {
  /* styles */
}

Firefox has its own pseudo-class -moz-progress-bar which can be only used to define styles for the progress indicator.

progress::-moz-progress-bar {
  /* styles */
}

Here is a complete list of all selectors to define styles for progress element.

progress {
  /* styles */
}

progress::-webkit-progress-bar {
  /* styles  */
}

progress::-webkit-progress-value {
  /* styles */
}

progress::-moz-progress-bar {
  /* styles */
}

Changing progress bar value in JavaScript

Now, let's take as an example a simple progress bar which has the following HTML code.

<progress max="100" value="0" id="demo-progress-bar"></progress>

To change the value of this progress bar in JavaScript the following code will suffice.

document.getElementById( 'demo-progress-bar' ).value = 45;

The code above changes the value of the progress element with id "demo-progress-bar" to 45.

Here is a simple JavaScript code that changes the value of the progress element from 0 to 100 increasing it by one every 100 milliseconds.

var counter = 0;
function progressDemo() {
  counter++;
  document.getElementById( 'demo-progress-bar' ).value = counter;
  if( counter == 100 ) {
    clearInterval( timer );
  }
}
var timer = setInterval( progressDemo, 100 );

Live demo


 

Read also

Form validation in HTML5

Form validation in HTML5

New types of element input in HTML5

New types of element input in HTML5

Discussion (total 2 comments)

Patrick Radulian
February 26, 2015 at 07:30 am
In your last code block, it should read "clearInterval" instead of "clearTimeout", I believe.
Administrator User
Administrator User
February 26, 2015 at 07:50 am
Hello Patrick Radulian!
Thank you for your help! I made this mistake accidentally! I have already corrected the article!

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation