Use css3 to build Ajax loading animations

Document directory

Address: http://webdesignersdesk.com/2010/05/create-ajax-loading-animation-with-css3/

Translator: Jiang Yujie

 

 

 

Generally, front-end engineers use GIF animated images to demonstrate Ajax loading. But now css3 has introduced animation attributes. We can use css3 to load the same Ajax animation effect without using GIF animated images. Now let's start to achieve the desired effect.

Important: only supportedWebKitKernel browser (SafariAndChrome)

Example

Html

Here we only show the code of the first Ajax loading example in the demo. First, we need a container named "loading" to place all the animation elements. Then we need to define a separate Div for each column and define a uniform class attribute.

<Div id = 'loading'> <br/> <Div id = 'canonical1' class = 'canonicals'> </div> <br/> <Div id = 'canonicaln2' class = 'canonicals'> </div> <br/> <Div id = 'canonicaln3 'class = 'canonicals'> </div> <br/> <Div id =' coloumn4 'class = 'canonicals'> </div> <br/> <Div id = 'canonical5' class = 'canonicals'> </div> <br/> <Div ID = 'canonical6' class = 'canonicals'> </div> <br/> </div> 

UseCss3Design Animation

All the codes below are annotated.

 

# Loading {<br/> margin-top: 30px; <br/> float: Left; <br/> width: 95px; <br/> Height: 32px; <br/> background-color: #779ec2; <br/> margin-left: 30px; <br/>/* css3 rounded border */<br/>-WebKit-border-radius: 5px; <br/>-moz-border-radius: 5px; <br/> border-radius: 5px; <br/>}< br/>. coloumns {<br/> background-color: # FFF; <br/> border: 1px solid # FFF; <br/> float: Left; <br/> Height: 30px; <br/> margin-left: 5px; <br/> width: 10px; <br/>/* Here we define an animation name, then we will implement it */<br/>-WebKit-animation-Name: animation; <br/>/* total time of one animation loop */<br/>-WebKit-animation-Duration: 3 S; <br/>/* Number of animation cycles, we set it to infinity */<br/>-WebKit-animation-iteration-count: infinite; <br/>-WebKit-animation-direction: Linear; <br/>/* the transparency of all original columns is 0 */<br/> opacity: 0; <br/>/* scale it to 0.8 */<br/>-WebKit-transform: Scale (0.8 ); <br/>}< br/> # coloumn1 {<br/>/* The first column of animation is delayed for 0.3 seconds */<br/>-WebKit-animation-delay :. 3 S; <br/>}< br/> # coloumn2 {<br/>/* Second-column animation delay: 0.4 seconds */<br/>-WebKit-animation-delay :. 4 S; <br/>}< br/> # coloumn3 {<br/>/* the animation in the third column is delayed for 0.5 seconds */<br/>-WebKit-animation-delay :. 5 S; <br/>}< br/> # coloumn4 {<br/>/* the animation in the fourth column is delayed by 0.6 seconds */<br/>-WebKit-animation-delay :. 6 s; <br/>}< br/> # coloumn5 {<br/>/* the animation in the fourth column is delayed by 0.7 seconds */<br/>-WebKit-animation-delay :. 7 S; <br/>}< br/> # coloumn6 {<br/>/* the animation in the fourth column is delayed by 0.8 seconds */<br/>-WebKit-animation-delay :. 8 s; <br/>}< br/>/* we have previously defined the animation name, set the animation attributes here */<br/> @-WebKit-keyframes animation {<br/>/* When the animation starts, the transparency of each column is 0 */< br/> 0% {opacity: 0 ;}< br/>/* the transparency of each column in the middle of the animation is 1 */<br/> 50% {opacity: 1 ;} <br/>/* When the animation ends, the transparency of each column is restored to 0 */<br/> 100% {opacity: 0 ;} <br/>}< br/> 

 

Load Animation2And3OfCSSCode

# Loading1 {<br/> margin-top: 30px; <br/> float: Left; <br/> margin-left: 30px; <br/>}< br/>. coloumns1 {<br/> background-color: # 39f; <br/> border: 1px solid # 00f; <br/> float: Left; <br/> Height: 30px; <br/> margin-left: 5px; <br/> width: 8px; <br/>-WebKit-animation-Name: animation1; <br/>-WebKit-animation-Duration: 2 S; <br/>-WebKit-animation-iteration-count: infinite; <br/>-WebKit-animation-Direction: linear; <br/> opacity: 0.2; <br/>-WebKit-transform: Scale (0.6 ); <br/>}< br/> # coloumn11 {<br/>-WebKit-animation-delay :. 3 S; <br/>}< br/> # coloumn22 {<br/>-WebKit-animation-delay :. 4 S; <br/>}< br/> # coloumn33 {<br/>-WebKit-animation-delay :. 5s; <br/>}< br/> # coloumn44 {<br/>-WebKit-animation-delay :. 6 s; <br/>}< br/> # coloumn55 {<br/>-WebKit-animation-delay :. 7 S; <br/>}< br/> # coloumn66 {<br/>-WebKit-animation-delay :. 8 s; <br/>}< br/> @-WebKit-keyframes animation1 {<br/> 0% {-WebKit-transform: Scale (. 9); opacity: 1 ;}< br/> 100% {-WebKit-transform: Scale (. 2); opacity: 0.1 ;}< br/>}< br/> # loading2 {<br/> margin-top: 30px; <br/> float: left; <br/> margin-left: 30px; <br/>}< br/>. coloumns{ <br/>-WebKit-border-radius: 10px; <br/>-moz-border-radius: 10px; <br/> border-radius: 10px; <br/> background-color: # 39f; <br/> float: Left; <br/> Height: 20px; <br/> margin-left: 5px; <br/> width: 20px; <br/>-WebKit-animation-Name: animation2; <br/>-WebKit-animation-Duration: 2 S; <br/>-WebKit-animation-iteration-count: infinite; <br/>-WebKit-animation-direction: Linear; <br/> opacity: 0; <br/>}< br/> # coloumn111 {<br/>-WebKit-animation-delay :. 1 s; <br/>}< br/> # coloumn222 {<br/>-WebKit-animation-delay :. 3 S; <br/>}< br/> # coloumn333 {<br/>-WebKit-animation-delay :. 5s; <br/>}< br/> # coloumn444 {<br/>-WebKit-animation-delay :. 7 S; <br/>}< br/> @-WebKit-keyframes animation2 {<br/> 0% {opacity: 0 ;}< br/> 50% {opacity: 1 ;}< br/> 100% {opacity: 0 ;}< br/>}< br/> 

 

Note:

Now we have four ways to implement HTML Animation:

1. gif animated images are easy to use. The disadvantage is that they are 256 colors. The background cannot be completely transparent and the effect is poor.

2. css3 control. The disadvantage is that it is effective only on browsers that support css3, And the implementation is complicated. The advantage is that the effect is good and the efficiency is high.

3. Javascript implementation. The effect is similar to CSS implementation. It is less efficient than native CSS, but it can be supported across browsers.

4. HTML5 canvas, which is complicated to achieve more advanced effects.