CSS: Progress Bar Example

By Xah Lee. Date: . Last updated: .

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

addendum: HTML5 introduced <meter> and <progress> tags. You might use those instead. See: HTML5 {meter, progress} Tags.

Here's a example of progress bars:

Here's the HTML code for each progress bar:

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

Here's 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's 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's 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;
}

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

Like what you read? Buy JavaScript in Depth