Mobile Web Albums--CSS3 progress bar

1. Introduction

Because the project upload works and web albums need to upload, all need to use the progress bar, the implementation of the progress bar can be used falsh, pictures, JavaScript, but here I was in the mobile use, so focus on the implementation of CSS3 method.

2. Code display

/*Outer box*/. Progress_box{Height:10px;width:200px;Border-radius:5px;Background-color:#ececec; }/*Animation*/@-webkit-keyframes ProgressBar{From {width:0} to{width:100%}        }        /*Standard Syntax*/@keyframes ProgressBar{From {width:0} to{width:100%}        }        /*Normal progress bar*/. Bar1{Height:10px;background:#4fd0bc;width:0;Border-radius:5px;-webkit-transition:width. 10s ease;transition:width. 10s ease;-webkit-animation:ProgressBar 10s Infinite both;Animation:ProgressBar 10s Infinite both;/*here to demonstrate-webkit-animation-iteration-count set to infinite*/}/*Stripe progress bar*/. Bar2{width:0;Height:10px;background:#4fd0bc;Border-radius:5px;Background-image:linear-gradient ( -45deg,rgba (255,255,255,.5) 25%,transparent 25%,transparent 50%,rgba (255,255,255,.6) 50%,rgba ( 255,255,255,.6) 75%,transparent 75%,transparent);-webkit-transition:width. 10s ease;transition:width. 10s ease;-webkit-animation:ProgressBar 10s Infinite both;Animation:ProgressBar 10s Infinite both; }

3. General progress Bar

<div class= "Progress_box" ><div class= "Bar1" ></div></div>

4. Stripe progress bar

<div class= "Progress_box" ><div class= "Bar2" ></div></div>

5.HTML5 Implementation progress bar

The above two methods are implemented using div wrapping, but HTML5 provides a new property, without nesting packages, a property is done;

(1) Progress

Progress element is a new property of HTML5, IE9 (including IE9) does not support

(2) Basic properties:

1.max refers to the maximum value. If default, the progress value range from 0.0~1.0, if set to max=100, the progress value range from 0~100

2. Current value of the value process

(3) The default effect is as follows:

(4) Modify the default style to achieve the effect as above:

. PGs{width:200px;Border:1px solid #ccc;Background-color:#ececec;Border-radius:5px;Height:10px;Border:None;}Progress::-webkit-progress-bar{Background-color:#ececec;Border-radius:5px;}Progress::-webkit-progress-value{background:#4fd0bc;Border-radius:5px;}

<progress value= "max=" class= "pgs" ></progress>

Here, based on the progress of the upload, directly modify the value is OK $ ("Progress"). Val (precent);

Mobile Web Albums--CSS3 progress bar