Css3 progress bar, html5 progress bar
<! DOCTYPE html>
<Html>
<Head>
<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. 6 s linear;
}
@-Webkit-keyframes move {
0% {width: 0 ;}
100% {width: 45% ;}
}
</Style>
</Head>
<Body>
<Div> http://www.999jiujiu.com/</div>
<Div id = "page-wrap">
<Div class = "meter">
<Span style = "width: 45%"> </span>
</Div>
</Div>
</Body>
</Html>