BS-Progress Bar Pack

Hi folks, I’m just introducing a progress bar pack that you can use for application or website wherever. The pack contains three types of progress bar container and six different type colors of animated gif progress bars.The container have colors with gray, white and black and have title like “Please wait…” and a footer text “Your request is being processed” which you can change as your own content. You can download the source code and images and I have just explained the code so you and learn or edit as you like.

Demo: BS Progress Bar Demo

How To ?

Step 1: CSS

/* Type one Container /*

	.prg_bar_bg{
		background:url(images/progress_bar_bg.png) no-repeat;
		width:298px;
		height:89px;
		padding-top:16px;
		text-align:center;
		}
	.prg_bar_bg .prg_bar {
		text-align:center;
		padding-bottom:5px;
		padding-top:5px;
		}
	.prg_bar_bg .prg_title {
		font:bold 12px/normal Verdana, Geneva, sans-serif;
		color:#323232;
		}
	.prg_bar_bg .prg_cntnt {
		font:normal 11px/normal Verdana, Geneva, sans-serif;
		color:#5d5d5d;
		padding-top:5px;
		}

/* Type Two Container /*

	.prg_bar_bg_black{
		background:url(images/progress_bar_bg_black.png) no-repeat;
		width:302px;
		height:91px;
		padding-top:16px;
		text-align:center;
		}
	.prg_bar_bg_black .prg_bar {
		text-align:center;
		padding-bottom:5px;
		padding-top:5px;
		}
	.prg_bar_bg_black .prg_title {
		font:bold 12px/normal Verdana, Geneva, sans-serif;
		color:#ccc;
		}
	.prg_bar_bg_black .prg_cntnt {
		font:normal 11px/normal Verdana, Geneva, sans-serif;
		color:#999;
		padding-top:5px;
		}

/* Type Three Container /*

	.prg_bar_bg_white{
		background:url(images/progress_bar_bg_white.png) no-repeat;
		width:307px;
		height:90px;
		padding-top:16px;
		text-align:center;
		}
	.prg_bar_bg_white .prg_bar {
		text-align:center;
		padding-bottom:5px;
		padding-top:5px;
		}
	.prg_bar_bg_white .prg_title {
		font:bold 12px/normal Verdana, Geneva, sans-serif;
		color:#333;
		}
	.prg_bar_bg_white .prg_cntnt {
		font:normal 11px/normal Verdana, Geneva, sans-serif;
		color:#666;
		padding-top:5px;
		}

Step 2: HTML

	<div class="prg_bar_bg"> <!-- change this class for different container style -->
    	<div class="prg_title">Please wait...</div>
    	<div class="prg_bar"><img src="images/progress_bar_violet.gif" /></div><!-- call different progress bar image -->
    	<div class="prg_cntnt">Your request is being processed</div>
    </div>

[Download not found]