Easily implement progress bar in your website using CSS. In this tutorial I have tried to give it XP alike look.
<div id=”barlimit”> <!– this is the main division holding the progress bar –>
<div id=”bar1″> <!– progress completed division –>
<div id=”bar2″> <!– progress remaining division –>
Here we implemented barlimit division to hold the whole progress bar. bar1 division will hold the completed portion of progress bar. You can replace “20%” text with anything you want.
width:600px; /* width of progress bar */
height:20px; /* height of progress bar */
width:20%;/* % progress completed */
background:#0000ff; /* color for progressed portion */
width:80%; /* % progress to be completed (must be 100-width of bar1) */
background:#b4b4b4; /*color for progress to be completed portion */
The CSS code creates progress bar looking like XP. To make progress bar looking like Vista and Windows 7 you will need background images. The css is supposed to be embedded in the HTML file itself and it should be dynamic. The % values will change according to the progress. You can download my CSS here.