ProgressBar

by Greg Finzer

HTML

<div class="progress-bar-outer"><p class="progress-bar-fill progress-bar-outstanding">&nbsp;</p></div>
<p></p>

<div class="progress-bar-outer"><p class="progress-bar-fill progress-bar-acceptable">&nbsp;</p></div>
<p></p>

<div class="progress-bar-outer"><p class="progress-bar-fill progress-bar-unacceptable">&nbsp;</p></div>
<p></p>

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

CSS

.progress-bar-outer
{
  position: relative; 
  width: 100px; 
  height: 10px; 
  border: 2px solid #D9D9D9;
}

.progress-bar-fill
{
  position: absolute; 
  left: 0; 
  top: 0; 
  height: 100%; 
  font-size: 0px;
}

.progress-bar-outstanding
{
  background-color: #00A651; 
  width: 83%; 
}

.progress-bar-acceptable
{
  background-color: #FFF200; 
  width: 50%; 
}

.progress-bar-unacceptable
{
  background-color: #BE1E2D; 
  width: 16%; 
}