Share the exquisite animation progress bar compiled by pure css3 (with source code) and the exquisite animation progress bar compiled by pure css3 (with source code)

The real purpose of loading animations and progress bars is to let users know the task progress. There are many JavaScript-based animations, but I decided to switch to css3.In this tutorial, I decided to make an animation progress bar using pure CSS: no flash, no images, no scripts. He can dynamically load changesIn addition, I focus on finding the simplest way to do this.Here is an example:

 

These Article Maybe you like it too

Cutting-edge design recommendations-very popular speech bubble effects created by pure CSS
Use the css3 hover effect to create different page la s
CSS 3 tips for Web developers
25 powerful CSS codes, which are often tricky for developers
Recommendation on front-end development performance-how to reduce the size of CSS code

 

%Mobile

HTML Tag:

What we need is the two divs. The first divs will represent the main container, the rounded corner, and the shadow effect, and the actual progress bar of the second Divs.I added an input and a button control and a playback progress bar.

 <  Div  ID  = "Prbar"  >    <  Div ID  = "Prpos"  >    </  Div  >  </  Div  >  <  Input  ID  = "MoveTo"  Value  = "57"  Style  = "Width: 30px ;"  />  %  <  Button  Onclick  = "MoveTo (); Return false ;"  > Move </  Button  > 

The CSS:

 # Prbar { Margin : 5px ; Width :500px ; Background-color : # Dddddd ; Overflow : Hidden ; /*  Border Effect  */  Border : 1px solid # bbbbbb ; -Moz-border-radius : 15px ; Border-radius :15px ; /*  Add a shadow effect to the progress bar  */  -WebKit-box-shadow : 0px 2px 4px #555555 ; -Moz-box-shadow : 0px 2px 4px #555555 ; Box-shadow : 0px 2px 4px #555555 ;} /*  No rounded corners for opera, because the overflow: hidden dont work with rounded corners */  Doesnotexist:-o-prefocus, # prbar { Border-radius : 0px ;} # Prpos { Width : 0% ; Height : 30px ; Background-color : # 3399ff ; Border-Right : 1px solid # bbbbbb ; /*  Css3 progress bar gradient  */  Transition : Width 2 S elapsed ; -WebKit-Transition : Width 0 s elapsed ; -O-Transition : Width 0 s elapsed ; -Moz-Transition : Width 0 s elapsed ; -MS-Transition :Width 0 s elapsed ; /*  Css3 stripes  */  Background-Image : Linear-gradient (135deg, # 3399ff 25%, #99 CCFF 25%, #99 CCFF 50%, # 3399ff 50%, # 3399ff 75%, #99 CCFF 75%, #99 CCFF 100%) ; Background-Image : -Moz-linear-gradient (135deg, # 3399ff 25%, #99 CCFF 25%, #99 CCFF 50%, # 3399ff 50%, # 3399ff 75%, #99 CCFF 75%, #99 CCFF 100%) ; Background-Image :-MS-linear-gradient (135deg, # 3399ff 25%, #99 CCFF 25%, #99 CCFF 50%, # 3399ff 50%, # 3399ff 75%, #99 CCFF 75%, #99 CCFF 100%) ; Background-Image : -O-linear-gradient (135deg, # 3399ff 25%, #99 CCFF 25%, #99 CCFF 50%, # 3399ff 50%, # 3399ff 75%, #99 CCFF 75%, #99 CCFF 100%) ; Background-Image : -WebKit-gradient (linear, 100% 100%, 0 0, color-stop (. 25, #99 CCFF), color-stop (. 25, # 3399ff), color-stop (. 5, # 3399ff), color-stop (. 5, #99 CCFF), color-stop (. 75, #99 CCFF), color-stop (. 75, # 3399ff), color-stop (1, # 3399ff )) ; Background-Image :-WebKit-linear-gradient (135deg, # 3399ff 25%, #99 CCFF 25%, #99 CCFF 50%, # 3399ff 50%, # 3399ff 75%, #99 CCFF 75%, #99 CCFF 100%) ; Background-size : 40px 40px ; /*  Background stripes Animation  */  Animation : Bganim 3 s linear 2 S infinite ; -Moz-Animation : Bganim 3 s linear 2 S infinite ; -WebKit-Animation :Bganim 3 s linear 2 S infinite ; -O-Animation : Bganim 3 s linear 2 S infinite ; -MS-Animation : Bganim 3 s linear 2 S infinite ;} @ Keyframes bganim { From {background-Position : 0px ;} To { Background-Position : 40px ;}} @-Moz-keyframes bganim { From {background-Position : 0px ;} To { Background-Position : 40px ;} } @-WebKit-keyframes bganim { From {background-Position : 0px ;} To { Background-Position : 40px ;}} @-O-keyframes bganim { From {background-Position : 0px ;} To { Background-Position : 40px ;} } @-MS-keyframes bganim { From {background-Position : 0px ;} To { Background-Position : 40px ;}} 

The width and height of the progress bar can only be specified once. The specified width is within the "prbar" and the height is within the "prpos.

You can change it to any background stripe or any texture you want, such as linear gradient, you can draw, line, circle

The animation:

For the progress bar animation, we only need to set the width of another Div. The simplest way is to directly specify the width of the percentage calculation.

The small JavaScript function reads the input value and sets the width to the animation progress bar.

 
FunctionMoveTo (){VaRPrpos = Document. getelementbyid ('prpos'); Prpos. style. Width= Document. getelementbyid ('moveto '). Value + "%";}
 

 Click here to download it.

Link to this article: Share the exquisite animation progress bar (with source code) Written in css3 only)