Create Positive and Negative ProgressBar by using CSS and HTML

Comment: 1 Comments | Hit: 2014 | Date: 25 Feb 2011 02:02 | Category: CSS

Normally, ProgressBar is used to compare work of each project by percentage. With CSS and HTML, you can now create your own progress bar very easy.

Final Output

Final output of CSS progress bar

Main Idea

I am using 3 DIV tags to output the bar. DIV#1 is the main wrapper that you can set it's width to fix where you want to use. DIV#2 is the progress bar which it's width is the percentage of the value. DIV#3 is the label of the bar.

Positive Bar

The width of bar_progress is set the same as the value of bar_label.

HTML Code:

20%

CSS:

div.bar_wrapper{
	float:		left;
	width:		200px; 
	border:		1px solid #CCC; 
	height:		1.5em; 
}
div.bar_progress{
	background:	#A2D1E8; 
	height:		1.5em;
}
div.bar_label{
	float:		left; 
	margin-left:	5px;
}

Positive and Negative Bar

As you see in the above image of the positive and negative progress bar, the positive is blue and the negative is red. Technically, i am using the same way of creating the positive bar. Single positive bar is using 100% up on the width of the bar_label. But for positive and negative bar, i am using 50% of the width of the bar_label. It means that the width of bar_progress is equal the width of bar_label divided by 2.

HTML Code:

Positive:

margin-left of the bar_progress_positive is absolutely 50%
width of the bar_progress_positive is bar_label's value divided by 2

70%

Negative:

width of the bar_progress_negative is bar_label's value divided by 2
margin-left of the bar_progress_negative is equal 50 minus the bar_label's width

20%

CSS:

div.bar_wrapper{
	float:		left;
	width:		200px; 
	border:		1px solid #CCC; 
	height:		1.5em; 
}
div.bar_progress_positive{
	background:	#A2D1E8; 
	height:		1.5em;
}
div.bar_progress_negative{
	background:	#C30; 
	height:		1.5em;
}
div.bar_label{
	float:		left; 
	margin-left:	5px;
}

Demo:

http://www.nvitou.com/uploaded/css/css-progressbar/demo.html