CSS: Progress Bar Example

Use HTML Meter and Progress Tags

• HTML5 introduced meter and progress tags.
• You should use those instead.

• HTML: progress Tag
• HTML: meter Tag

Example, Progress Bar

This page shows you how to use CSS to emulate the look of a progress bar.

Here is a example of progress bars:

Code

Here is the HTML code for each progress bar:

<div class="bg-bar">
 <div class="progress"></div>
</div>

Here is the CSS code:

div.bg-bar {
 height: 10px;
 border: solid;
 background-color: green;
 width: 100px;
}

div.progress {
 height: 10px;
 border: solid;
 background-color: red;
 width: 1px;
}

The length of the red progress bar is just the value of the “width” element.

Progress Bar Example 2

Here is a refined version of progress bar. We use position:relative to make the bar align, and we use border-radius to make the right side round.

Here is the code.

<div class="progress_bar_bg">
 <div class="progress_bar_fg"></div>
</div>

div.progress_bar_bg {
 margin: 5px;
 height: 20px;
 width: 200px;
 border: solid thin black;
 background-color: green;
}

div.progress_bar_fg {
 position: relative;
 top: -1px;
 left: -1px;
 height: 20px;
 width: 70px;
 border: solid thin black;
 border-top-left-radius: 0;
 border-top-right-radius: 9px;
 border-bottom-right-radius: 9px;
 border-bottom-left-radius: 0;
 background-color: red;
}

• CSS: Position Property
• CSS: Round Corners

To generate changing progress bar, you'll need to use JavaScript. See: JS DOM: Change CSS .