Compatible Browsers:
Example: View Code Demo
<!doctype html>
<head>
<title>HTML5 CSS3 Striped Progress Bars</title>
<style>
/* Begin HTML5 CSS3 Striped Progress Bars */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */
/* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */
/* == Created by: Galen Gidman : http://galengidman.com/2010/12/20/css3-progress-bars : Creative Commons License == */
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);
*{margin:0;padding:0}
body{width:640px;margin:auto;padding:100px 0 50px 0;background:#222; color:#ccc;}
#container{font:16px/24px 'Droid Serif',Georgia,serif;text-align:center;color:#fff;text-shadow:0 1px 0 #000}
h1{font-size:36px;line-height:36px}
h3{margin-top:50px}
a{color:#fff}
#bars-container{margin:50px 0}
.progress-bar{float:left;margin:10px 0}
.alt{float:right}
.clear{clear:both}
/* progress bar base */
.progress-bar {
width:300px;
height:24px;
padding:4px;
background-color:#191919;
border-radius:16px;
-webkit-border-radius:16px;
-moz-border-radius:16px;
box-shadow:inset 0 1px 2px #000, 0 1px 0 #2b2b2b;
-webkit-box-shadow:inset 0 1px 2px #000, 0 1px 0 #2b2b2b;
-moz-box-shadow:inset 0 1px 2px #000, 0 1px 0 #2b2b2b;
}
/* code for the inner (colorful) part of the bar */
.progress-bar:before {
content:'';
display:block;
position:absolute;
width:200px;
height:24px;
background:#999;
border-radius:12px;
-webkit-border-radius:12px;
-moz-border-radius:12px;
box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 3px rgba(0, 0, 0, 0.4), 0 1px 1px #000;
-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 3px rgba(0, 0, 0, 0.4), 0 1px 1px #000;
-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 3px rgba(0, 0, 0, 0.4), 0 1px 1px #000;
}
/* code to stripe the bars */
.progress-bar:after {
content:'|||||||||||||';
display:block;
position:absolute;
width:200px;
height:24px;
overflow:hidden;
border-radius:12px;
-webkit-border-radius:12px;
-moz-border-radius:12px;
transform:skewX(-30deg);
-webkit-transform:skewX(-30deg);
-moz-transform:skewX(-30deg);
-o-transform:skewX(-30deg);
font:bold 120px/80px sans-serif;
letter-spacing:-6px;
color:#000;
opacity:0.06;
}
/* code for the colors */
.blue:before {background:#099;background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#099), to(#006A6B));background:-moz-linear-gradient(top, #099, #006A6B);}
.pink:before {background:#f09;background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f36), to(#AC2246));background:-moz-linear-gradient(top, #f36, #AC2246);}
.green:before {background:#7EBD01;background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#7EBD01), to(#568201));background:-moz-linear-gradient(top, #7EBD01, #568201);}
.orange:before {background:#f90;background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f90), to(#f60));background:-moz-linear-gradient(top, #f90, #f60);}
</style>
</head>
<body>
<div id="container">
<h1>CSS3 Striped Progress Bars</h1>
<div id="bars-container">
<div class="progress-bar blue"></div>
<div class="progress-bar orange alt"></div>
<div class="progress-bar green"></div>
<div class="progress-bar pink alt"></div>
<div class="clear"></div>
</div>
</div>
<br /><br />
<div id="snippet">
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_153.html">Striped Progress Bars</a> page. ]
</div>
</div>
</body>
</html>