Progress Bar Example with CSS

Xah Lee, 2005-11-30, 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: JavaScript: Changing a Element's Style.