Tutorial: Create progress bar using CSS
Easily implement progress bar in your website using CSS. In this tutorial I have tried to give it XP alike look.
HTML Code:
<div id=”barlimit”> <!– this is the main division holding the progress bar –>
<div id=”bar1″> <!– progress completed division –>
20%
</div>
<div id=”bar2″> <!– progress remaining division –>
</div>
</div>
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.
CSS:
#barlimit{
width:600px; /* width of progress bar */
height:20px; /* height of progress bar */
}
#bar1{
width:20%;/* % progress completed */
background:#0000ff; /* color for progressed portion */
display:inline;
float:left;
text-align:center;
font-weight:bold;
color:#ffffff;
}
#bar2{
width:80%; /* % progress to be completed (must be 100-width of bar1) */
background:#b4b4b4; /*color for progress to be completed portion */
display:inline;
float:right;
}
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.
Demo: http://www.terabug.com/css-progress-bar/index.html
Share with Friends ( Sharing is Caring! )
Subscribe For E-mail Notification Of Article Updates
DO NOT FORGET TO CLICK ON THE VERIFICATION LINK AFTER SUBSCRIBING,THE VERIFICATION MAIL WILL BE SENT TO YOU FROM "FeedBurner Email Subscriptions".
( What is this? Why I need to do this?)
Related Posts
Search
Free Daily E-mail News Letter
DO NOT FORGET TO CLICK ON THE VERIFICATION LINK AFTER SUBSCRIBING,THE VERIFICATION MAIL WILL BE SENT TO YOU FROM "FeedBurner Email Subscriptions".
( What is this? Why I need to do this?)
Tip Of The Day
Meet the Author
Mail me:
Stay Connected With Me
