CSS3 progress bars - code-chunk.com

<html>
<head>
<title>Progress Bar Demo | Codelator</title>
</head>
<body>

<h3>Simple Progress Bars</h3>
<div class="container">
<div class="red progressbar" style="width:20%"></div>
</div>

<div class="container">
<div class="orange progressbar"  style="width:100%"></div>
</div>

<br />

<h3>Animated Progress Bars</h3>
<div class="container striped active">
<div class="progressbar red" style="width:33.33%"></div>
</div>

<div class="container striped active">
<div class="progressbar blue" style="width: 66.66%"></div>
</div>

<br />

<h3>Multicolored Progress Bars</h4>
<div class="container">
<div class="orange progressbar"  style="width:25%"></div>
<div class="red progressbar" style="width:30%"></div>
<div class="yellow progressbar" style="width:45%"></div>
</div>

<div class="container">
<div class="blue progressbar"  style="width:10%"></div>
<div class="green progressbar" style="width:50%"></div>
<div class="red progressbar" style="width:40%"></div>
</div>

<br />

<h3>Striped Progress Bar</h3>
<div class="container striped">
<div class="red progressbar" style="width:80%"></div>
</div>

<div class="container striped">
<div class="progressbar green" style="width:40%"></div>
</div>

<br />

<h3>Gradient Progress Bar</h3>
<div class="container gradient">
<div class="yellow progressbar" style="width:25%"></div>
</div>

<div class="container gradient">
<div class="progressbar blue" style="width:75%"></div>
</div>

<br />
<h6>© Codelator.com, All rights reserved.</h6>
</body>
</html>

HTML

body{
	background-color:#444;
	width:50%;
	margin:50px auto;
	color:#fff
}
h3,h6{
	text-align:center;
	font-family:Tahoma, Geneva, sans-serif
}
	
/* Code for Animation STARTS */
@-webkit-keyframes bars{
	from{
			background-position:40px 0
		}
		to
		{
			background-position:0 0
		}
}

@keyframes bars{
	from{
			background-position:40px 0
		}
		to
		{
			background-position:0 0
		}
}
/* Code for Animation ENDS */
 
 
/* Container for Progress Bar STARTS */
.container{
	background-color:#F1F1F1;
	border-radius:10px;	
	height:15px;
	overflow:hidden;
	margin-bottom:15px;
}
/* Container for Progress Bar ENDS */

/* Progress Bar STARTS */
.progressbar{
	height:100%;
	width:0%;
	float:left;
	
}
/* Progress Bar ENDS */

/* Colors STARTS*/
.red{background-color:#C33}
.blue{background-color:#09F}
.green{background-color:#6F0}
.yellow{background-color:#FC0}
.orange{background-color:#F60}
/* Colors ENDS*/

.container.active .progressbar{
	-webkit-animation:bars 5s linear infinite;
	animation:bars 5s linear infinite;
}
.striped .progressbar{
	background-size:40px 40px;
	background-image:linear-gradient(135deg, #fff 50%, transparent 50%, transparent 50%, #fff 50%, rgba(255,255,255) 50%, transparent 50%, transparent);
	background-image:-webkit-linear-gradient(135deg, #fff 50%, transparent 50%, transparent 50%, #fff 50%,#fff 50%, transparent 50%, transparent);
}
.striped .red{
	background-image:-webkit-linear-gradient(90deg, #F33 25%, transparent 25%, transparent 50%, #F33 50%, #F33 75%, transparent 75%, transparent);
	background-image:linear-gradient(90deg, #F33 25%, transparent 25%, transparent 50%, #F33 50%, #F33 75%, transparent 75%, transparent);
}
.striped .blue{
	background-image:-webkit-linear-gradient(135deg, #0CF 25%, transparent 25%, transparent 50%, #0CF 50%, #0CF 75%, transparent 75%, transparent);
	background-image:linear-gradient(135deg, #0CF 25%, transparent 25%, transparent 50%, #0CF 50%, #0CF 75%, transparent 75%, transparent);
}
.striped .green{
	background-image:-webkit-linear-gradient(135deg, #6C0 25%, transparent 25%, transparent 50%, #6C0 50%, #6C0 75%, transparent 75%, transparent);
	background-image:linear-gradient(135deg, #6C0 25%, transparent 25%, transparent 50%, #6C0 50%, #6C0 75%, transparent 75%, transparent);
}
.gradient .yellow{
	background-image:-webkit-linear-gradient(#FC6,#FF6);
	background-image:linear-gradient(#FC6,#FF6);
}
.gradient .blue{
	background-image:-webkit-linear-gradient(#06F,#0CF);
	background-image:linear-gradient(#06F,#0CF);
}

CSS

Loading....

Preview