A dynamic progress bar of gradients implemented with CSS3 and jquery

Progress bar is a common in the site, today after studying a foreign site example, try to use CSS3 to achieve the progress bar:

The HTML code is as follows:

    <div class= "Progress-bar blue stripes" >    <span style= "width:40%" ></span></div><p> Set above to:    <a href= "http://www.php1.cn/" >    <a href= "http://www.php1.cn/" >    <a href= " http://www.php1.cn/">    <a href=" http://www.php1.cn/"></p> <div class=" Progress-bar Orange Shine ">    <span style=" width:65% "></span></div><p>set above to:    <a href=" http ://www.php1.cn/">    <a href=" http://www.php1.cn/">    <a href=" http://www.php1.cn/">    < A href= "http://www.php1.cn/" ></p> <div class= "Progress-bar Green Glow" >    <span style= "width:55 % "></span></div><p>set above to:    <a href=" http://www.php1.cn/">    <a href=" http://www.php1.cn/">    <a href=" http://www.php1.cn/">    <a href=" http://www.php1.cn/">< /p>

CSS style:

body{background: #222; width:360px; margin:0 auto; font:13px ' Trebuchet MS ', Arial,helvetica;}    H2, p {text-align:center;color: #fafafa; text-shadow:0 1px 0 #111;  } A {color: #777;} . progress-bar{Background-color: #1a1a1a; height:25px; padding:5px; width:350px; margin:70px 0 20px 0;- moz-border-radius:5px; -webkit-border-raidus:5px; border-radius:5px;-moz-box-shadow:0 1px 5px #000 inset, 0 1px 0 #444;-webkit-box-shadow:0 1px 5px #1a1a1a inset,0 1px 0 #444; box-shadow:0  1px 5px inset,0 1px 0 #444; }.progress-bar span{display:inline-block; height:100% background-color: #777;-moz-border-radius:3px;- webkit-border-radius:3px; border-radius:3px; border-radius:3px; box-shadow:0 1px 0 Rgba (255,255,255,.5) inset; -webkit-box-shadow:0 1px 0 Rgba (255,255,.5) inset; -moz-box-shadow:0  1px 0 Rgba (255,255,.5) inset; -webkit-transition:width. 4s ease-in-out;    -moz-transition:width. 4s ease-in-out;-ms-transition:width. 4s ease-in-out;transition:width. 4s ease-in-out; }

The background of the main implementation progress bar:

. Blue span {background-color: #34c2e3;     }.orange span{Background-color: #fecf23;     Background-image:-webkit-gradient (Linear,left top,left bottom,from (#fecf23), to (#fd9215));     Background-image:-webkit-linear-gradient (Top, #fecf23, #fd9215);     Background-image:-moz-linear-gradient (Top, #fecf23, #fd9215);     Background-image:-ms-linear-gradient (Top, #fecf23, #fd9215);     Background-image:-o-linear-gradient (Top, #fecf23, #fd9215);     Background-image:linear-gradient (Top, #fecf23, #fd9215); Filter:progid:DXImageTransform.Microsoft.gradient (gradienttype=0,startcolorstr= ' #fecf23 ', endcolorstr= ' #fd9215 ' ); /* IE6 & IE7 */-ms-filter: "Progid:DXImageTransform.Microsoft.gradient (gradienttype=0,startcolorstr= ' #fecf23 ', Endcolorstr= ' #fd9215 ') ";        /* IE8 */}. Green span{background-color: #a5df41;        Background-image:-webkit-gradient (Linear,left top,left bottom,from (#a5df41), to (#4ca916)); Background-image:-webkit-linear-gradient (tOP, #a5df41, #4ca916);        Background-image:-moz-linear-gradient (Top, #a5df41, #4ca916);        Background-image:-ms-linear-gradient (Top, #a5df41, #4ca916);        Background-image:-o-linear-gradient (Top, #a5df41, #4ca916);         Background-image:linear-gradient (Top, #a5df41, #4ca916); Filter:progid:DXImageTransform.Microsoft.gradient (gradienttype=0,startcolorstr= ' #a5df41 ', endcolorstr= ' #4ca916 ' ); /* IE6 & IE7 */-ms-filter: "Progid:DXImageTransform.Microsoft.gradient (gradienttype=0,startcolorstr= ' #a5df41 ', Endcolorstr= ' #4ca916 ') ";            /* IE8 */}. Stripes span {-webkit-background-size:30px 30px;            -moz-background-size:30px 30px;                        background-size:30px 30px; Background-image:-webkit-gradient (linear, left top, right bottom, color-stop (. Rgba) (255 , 255, 255,.)), Color-stop (. 5, transparent), Color-stop (. 5, transparent), color-stop (. RGBA (255, 255, 255,.)), Color-stop (., Rgba (255, 255, 255,.)), Color-stop (.), TRANSP            Arent), to (transparent));                                Background-image:-webkit-linear-gradient (135deg, Rgba (255, 255, 255,.) 25%, Transparent 25%, Transparent 50%, RGBA (255, 255, 255,.) 50%, Rgba (255, 255, 255,.) 75%, Transpar            ENT 75%, transparent);                                Background-image:-moz-linear-gradient (135deg, Rgba (255, 255, 255,.) 25%, Transparent 25%,  Transparent 50%, RGBA (255, 255, 255,.) 50%, Rgba (255, 255, 255,.) 75%, Transparent            75%, Transparent);                                Background-image:-ms-linear-gradient (135deg, Rgba (255, 255, 255,.) 25%, Transparent 25%, Transparent 50%, RGBA (255, 255, 255,.) 50%, Rgba (255, 255, 255,.) 75%, Transparent 75%, TransparENT);                                Background-image:-o-linear-gradient (135deg, Rgba (255, 255, 255,.) 25%, Transparent 25%, Transparent 50%, RGBA (255, 255, 255,.) 50%, Rgba (255, 255, 255,.) 75%, Transparent 7            5%, transparent); Background-image:linear-gradient (135deg, Rgba (255, 255, 255,.) 25%, Transparent 25%, tr  Ansparent 50%, Rgba (255, 255, 255,.) 50%, Rgba (255, 255, 255,.) 75%, Transparent 75%,                                    Transparent);            -webkit-animation:animate-stripes 3s linear infinite;                       -moz-animation:animate-stripes 3s linear infinite; } @-webkit-keyframes animate-stripes {0% {background-position:0 0;} 100% {background-position:60px 0        ;} } @-moz-keyframes animate-stripes {0% {background-position:0 0;} 100% {Background-posi        tion:60px 0;}}. Shine span {position:relative;            }. Shine Span::after {content: ';            opacity:0;            Position:absolute;            top:0;            right:0;            bottom:0;            left:0;            Background: #fff;            -moz-border-radius:3px;            -webkit-border-radius:3px;                                    border-radius:3px;            -webkit-animation:animate-shine 2s ease-out infinite;                     -moz-animation:animate-shine 2s ease-out infinite;            } @-webkit-keyframes animate-shine {0% {opacity:0; width:0;}            50% {opacity:. 5;}        100% {opacity:0; width:95%;}            } @-moz-keyframes animate-shine {0% {opacity:0; width:0;}            50% {opacity:. 5;}        100% {opacity:0; width:95%;} }/*---------------------------*/. Glow Span {-moz-box-shadow:0 5px 5px Rgba (255, 255, 255,. 7) inset, 0-5px 5px rgba (255, 255, 255,. 7) inset;            -webkit-box-shadow:0 5px 5px Rgba (255, 255, 255,. 7) inset, 0-5px 5px rgba (255, 255, 255,. 7) inset;                        box-shadow:0 5px 5px Rgba (255, 255, 255,. 7) inset, 0-5px 5px rgba (255, 255, 255,. 7) inset;            -webkit-animation:animate-glow 1s ease-out infinite;                     -moz-animation:animate-glow 1s ease-out infinite; } @-webkit-keyframes Animate-glow {0% {-webkit-box-shadow:0 5px 5px rgba (255, 255, 255,. 7) Inset, 0-5p         x 5px Rgba (255, 255, 255,. 7) inset;}         50% {-webkit-box-shadow:0 5px 5px rgba (255, 255, 255,. 3) inset, 0-5px 5px rgba (255, 255, 255,. 3) inset;}         100% {-webkit-box-shadow:0 5px 5px rgba (255, 255, 255,. 7) inset, 0-5px 5px rgba (255, 255, 255,. 7) inset;} } @-moz-keyframes Animate-glow {0% {-moz-box-shadow:0 5px 5px rgba (255, 255, 255,. 7) inset, 0-5px 5px Rgba(255, 255, 255,. 7) inset;}         50% {-moz-box-shadow:0 5px 5px rgba (255, 255, 255,. 3) inset, 0-5px 5px rgba (255, 255, 255,. 3) inset;}         100% {-moz-box-shadow:0 5px 5px rgba (255, 255, 255,. 7) inset, 0-5px 5px rgba (255, 255, 255,. 7) inset;} }

Jquey section:

$ (document). Ready (function () {    $ ('. Quarter '). Click (function () {        $ (). Parent (). Prev (). Children ("span") . css (' width ', ' 25% ');        });        $ ('. Half '). Click (function () {            $ (this). Parent (). Prev (). Children (' span '). CSS ("width", ' 50% ');            });            $ ('. Three-quarters '). Click (function () {                $ (this). Parent (). Prev (). Children (' span '). CSS (' width ', ' 75% ');                });                $ ('. Full '). "Click (function () {                    $ (this). Parent (). Prev (). Children (' span '). CSS (' width ', ' 100% ');})    })

