<! DOCTYPE html>
<meta charset= "UTF-8" >
<TITLE>CSS3 progress bar </title>
<style>
. meter {
height:20px;
position:relative;
margin:60px 0 20px 0;
Background: #555;
-moz-border-radius:25px;
-webkit-border-radius:25px;
border-radius:25px;
padding:10px;
-webkit-box-shadow:inset 0-1px 1px rgba (255,255,255,0.3);
-moz-box-shadow:inset 0-1px 1px rgba (255,255,255,0.3);
Box-shadow:inset 0-1px 1px rgba (255,255,255,0.3);
}
. Meter > Span {
Display:block;
height:100%;
border-radius:20px;
Background-color:rgb (43,194,83);
Background-image:-webkit-gradient (linear,left bottom,left top,color-stop (0, RGB (43,194,83)), Color-stop (1, RGB ( (84,240,84)));
Background-image:-moz-linear-gradient (center Bottom,rgb (43,194,83) 37%,rgb (84,240,84) 69%);
Box-shadow:
Inset 0 2px 9px Rgba (255,255,255,0.3),
Inset 0-2px 6px Rgba (0,0,0,0.4);
position:relative;
Overflow:hidden;
-webkit-animation:move. 6s linear;
}
@-webkit-keyframes Move {
0% {width:0;}
100% {width:45%;}
}
</style>
<body>
<div>http://www.999jiujiu.com/</div>
<div id= "Page-wrap" >
<div class= "Meter" >
<span style= "width:45%" ></span>
</div>
</div>
</body>
CSS3 Progress bar