Loading effect implemented by pure CSS

The Loading effect implemented by pure CSS is the animation attribute of CSS3, which is a key experiment of CSS3. You can go to my codepen to check the effect. The following is a download link.

Let's take a look at the implementation process. Let's first look at the html file. div. container is the effect container, which contains 20 divs and circle.

 

Next, we use the LESS loop to set different sizes and animation latencies for each. circle.

/* First define the width and height of several variable boxes, @ w, @ h the number of circles in the box, @ n */@ w: 200px; @ h: 200px; @ n: 20;/* set the box size and position */. container {width: @ w; height: @ h; position: absolute; top: 50%; left: 50%; margin:-@ w/2 0 0-@ h/2 ;} /* settings. general performance of circle */. circle {position: absolute; top: 50%; left: 50%; transform-origin: center;}/* even number. circle performance */. circle: nth-child (2n) {border: 1px dashed # 16c; box-shadow: 0 0 3px # 16c; animation: oklw 4S ease infinite;}/* odd. circle performance */. circle: nth-child (2n + 1) {border: 1px solid # c16; box-shadow: 0 0 3px # c16; animation: okrw 6 s limit infinite ;} /* set the animation */@ keyframes oklw {0% {transform: rotate (720deg);} 100% {transform: rotate (360deg); }}@ keyframes okrw {0% {transform: rotate (0deg);} 100% {transform: rotate (720deg);}/* -- don't use LESS silly one by one, start -----------------. circle: nth-child (1) {width: 20px; height: 20px; margin:-10px 0 0-10px; animation-delay :. 5 s ;}. circle: nth-child (2) {width: 20px; height: 20px; margin:-10px 0 0-10px; animation-delay :. 5 s ;}. circle: nth-child (3) {width: 40px; height: 40px; margin:-20px 0 0-20px; animation-delay: 1 s ;}. circle: nth-child (4) {width: 40px; height: 40px; margin:-20px 0 0-20px; animation-delay: 1 s ;}. circle: nth-child (5) {width: 60px; height: 60px; margin:-30px 0 0-30px; animation-delay: 1.5 s ;}. circle: nth-child (6) {width: 60px; height: 60px; margin:-30px 0 0-30px; animation-delay: 1.5 s ;}. circle: nth-child (7) {width: 80px; height: 80px; margin:-40px 0 0-40px; animation-delay: 2 s ;}. circle: nth-child (8) {width: 80px; height: 80px; margin:-40px 0 0-40px; animation-delay: 2 s ;}. circle: nth-child (9) {width: 100px; height: 100px; margin:-50px 0 0-50px; animation-delay: 2.5 s ;}. circle: nth-child (10) {width: 100px; height: 100px; margin:-50px 0 0-50px; animation-delay: 2.5 s ;}. circle: nth-child (11) {width: 120px; height: 120px; margin:-60px 0 0-60px; animation-delay: 3 s ;}. circle: nth-child (12) {width: 120px; height: 120px; margin:-60px 0 0-60px; animation-delay: 3 s ;}. circle: nth-child (13) {width: 140px; height: 140px; margin:-70px 0 0-70px; animation-delay: 3.5 s ;}. circle: nth-child (14) {width: 140px; height: 140px; margin:-70px 0 0-70px; animation-delay: 3.5 s ;}. circle: nth-child (15) {width: 160px; height: 160px; margin:-80px 0 0-80px; animation-delay: 4 s ;}. circle: nth-child (16) {width: 160px; height: 160px; margin:-80px 0 0-80px; animation-delay: 4 s ;} -- Do not use LESS to write them one by one. The end position is --------------- * // * define a loop using LESS */. loopingClass (@ index) when (@ index> 0) {// set each. circle. circle: nth-child (@ {index}) {width: @ w * @ index/20; height: @ h * @ index/20; margin: -@ h * @ index/40 0 0-@ w * @ index/40; animation-delay: 0.2 s * @ index; z-index: @ n-@ index ;} // The next cycle. loopingClass (@ index-1);} // when the value is 0, do nothing and end the loop. loopingClass (0) {}/ * Call loop */. loopingClass (@ n );

 

OK. The effect is complete. I believe that you can understand the code writing process with comments. You can go to codepen to edit or download the results online.

For simplicity, we use prefix free.jsand normalize.css. It is not listed in the Code. You can click to download this effect file package.

 

---------------------------------------------------------------