Timer Shown by Progress Bar
This CSS will create a timer bar.
CSS:
#progress {
background:orange;
height:100%;
width:0;
text-align:right;
font:bold 12px arial;
border-right:1px silver solid;
border-top-right-radius:4px;
border-bottom-right-radius:4px;
line-height:30px;
color:#444;
-webkit-transition:width 5s linear; /* For Safari 3.1 to 6.0 */
transition:width 5s linear;
}
#progressContainer {
width:90%;
margin:0 auto;
height:30px;
border:1px silver solid;
border-radius:4px;
background:white;
}
Example:
Using the above CSS with the HTML below:
HTML:
<div id="progressContainer">
<div id="progress"></div>
</div>
Produces the result: