Tutorial: Create progress bar using CSS

Posted By: KP On January 18, 2011 Under Internet, Web Design Categories

Easily implement progress bar in your website using CSS. In this tutorial I have tried to give it XP alike look.

css-progress-bar

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 –>
&nbsp;
</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

Enter your email address:

NOTICE:
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

Post a Comment

OR