Dynamic progress bar of gradient implemented by css3 and jquery

Progress bars are common in websites. Today, after studying examples of a foreign website, we try to use css3 to implement the progress bar: the html code is as follows: & lt; divclass & quot; progress-barbluestripes & quot; & gt; & lt; spanstyle & quot; width: 40% & quot; & gt; & lt;/span & gt; & lt; the/d progress bar is a common type of website. After studying an example of a foreign website today, I tried to use css3 to implement the progress bar: the html code is as follows:

Set above to: 25%/50%/75%/100%

Set above to: 25%/50%/75%/100%

Set above to: 25%/50%/75%/100%

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. 4 s bytes-in-out;-moz-transition: width. 4 s bytes-in-out;-ms-transition: width. 4 s transition-in-out; transition: width. 4 s progress-in-out;} mainly implements the background of the 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 (. 25, rgba (255,255,255 ,. 15), color-stop (. 25, transparent), color-stop (. 5, transparent), color-stop (. 5, rgba (255,255,255 ,. 15), color-stop (. 75, rgba (255,255,255 ,. 15), color-stop (. 75, transparent), to (transparent); background-image:-webkit-linear-gradient (135deg, rgba (255,255,255 ,. 15) 25%, transparent 25%, transparent 50%, rgba (255,255,255 ,. 15) 50%, rgba (255,255,255 ,. 15) 75%, transparent 75%, transparent); background-image:-moz-linear-gradient (135deg, rgba (255,255,255 ,. 15) 25%, transparent 25%, transparent 50%, rgba (255,255,255 ,. 15) 50%, rgba (255,255,255 ,. 15) 75%, transparent 75%, transparent); background-image:-ms-linear-gradient (135deg, rgba (255,255,255 ,. 15) 25%, transparent 25%, transparent 50%, rgba (255,255,255 ,. 15) 50%, rgba (255,255,255 ,. 15) 75%, transparent 75%, transparent); background-image:-o-linear-gradient (135deg, rgba (255,255,255 ,. 15) 25%, transparent 25%, transparent 50%, rgba (255,255,255 ,. 15) 50%, rgba (255,255,255 ,. 15) 75%, transparent 75%, transparent); background-image: linear-gradient (135deg, rgba (255,255,255 ,. 15) 25%, transparent 25%, transparent 50%, rgba (255,255,255 ,. 15) 50%, rgba (255,255,255 ,. 15) 75%, transparent 75%, transparent);-webkit-animation: animate-stripes 3 s linear infinite;-moz-animation: animate-stripes 3 s 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-position: 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 2 s release-out infinite; -moz-animation: animate-shine 2 s release-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 1 s release-out infinite;-moz-animation: animate-glow 1 s release-out infinite ;} @-webkit-keyframes animate-glow {0% {-webkit-box-shadow: 0 5px 5px rgba (255,255,255 ,. 7) inset, 0-5px 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 ;}} preview effect: jquey part: $ (document ). ready (function () {$ ('. quarter '). click (function () {$ (this ). parent (). prev (). children ("span" ).css ('width', '000000') ;}); $ ('. half '). click (function () {detail (this).parent().prev().children('span'}.css ("width", '000000');}); $ ('. three-quarters '). click (function () {detail (this).parent().prev().children('span'0000.css ('width', '000000');}); $ ('. full '). click (function () {detail (this).parent().prev().children('span'}.css ('width', '123 ');})})