Dit is een eenvoudige demonstratie hoe je enkel met CSS een geanimeerde voortgangsbalk kunt simuleren.

Download afbeeldingen

1. bg_cover.gif (218)
2. bar.gif (210)
3. bg_bar.gif (147)

HTML

<dl>
 <dt>Ability to Annoy People</dt>
 <dd>
  <span><em style="left:160px">80%</em></span>
 </dd>
 <dt>Food Shortage Tolerance</dt>
 <dd>
  <span><em style="left:20px">10%</em></span>
 </dd>
 <dt>Karaoke Singing Skills</dt>
 <dd>
  <span><em style="left:100px">50%</em></span>
 </dd>
</dl>
<p class="progressBar">
 <span><em style="left:50px">25%</em></span>
</p>

CSS

/* DEFINITION LIST PROGRESS BAR */

dl, dt, dd{margin:0;padding:0;}

dd{
	width:216px;
	height:41px;
	background:url(bg_bar.gif) no-repeat 0 0;
	position:relative;
}
dd span{
	position:absolute;
	display:block;
	width:200px;
	height:25px;
	background:url(bar.gif) no-repeat 0 0;
	top:8px;
	left:8px;
	overflow:hidden;
	text-indent:-8000px;
}
dd em{
	position:absolute;
	display:block;
	width:200px;
	height:25px;
	background:url(bg_cover.gif) repeat-x;
	top:0;
}
/* SINGLE PROGRESS BAR */

.progressBar{
	width:216px;
	height:41px;
	background:url(bg_bar.gif) no-repeat 0 0;
	position:relative;
}
.progressBar span{
	position:absolute;
	display:block;
	width:200px;
	height:25px;
	background:url(bar.gif) no-repeat 0 0;
	top:8px;
	left:8px;
	overflow:hidden;
	text-indent:-8000px;
}
.progressBar em{
	position:absolute;
	display:block;
	width:200px;
	height:25px;
	background:url(bg_cover.gif) repeat-x 0 0;
	top:0;
}