Progress Bar Example with CSS

Xah Lee, 2005-11, 2010-03-20

This page shows the use of CSS's layer and positioning abilities, and the background color, to implement a progress bar.

Here's several progress bars:

Solution

Here's the HTML code. Each progress bar is like this:

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

The CSS is this:

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.

To generate changing progress bar, you'll need to use Javascript. See: Changing a Element's Style with Javascript.