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:

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: Change CSS .