CSS3 make loading load animation effect code

In our new design tutorial, I'll show you how to create a pure CSS3 loading load animation component (without any images). I think it can reduce the amount of code for your project and additional images on your site's load. I have three different styles of loading components. Now, let's see what I do.
Css3-loading
Step 1. Html
Here are three elements you can see here – the div where the "load" element is placed.

The code is as follows

Copy Code

<div class= "Main_body" > <div class= "Element" > <div class= "Loading1" > <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class= "Element" > <div class= "Loading2" > <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class= "Element" > <div class= "Loading3" > <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </div>

Step 2. Css
Now, the most interesting step, I will give you the style of each loaded element. Welcome to check the first style:

The code is as follows

Copy Code

. loading1 { height:100px; position:relative; width:80px; } . loading1 > Div { Background-color: #FFFFFF; height:30px; Position:absolute; width:12px; /* CSS3 RADIUS * * -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; /* CSS3 Transform-scale * * -webkit-transform:scale (0.4); -moz-transform:scale (0.4); -o-transform:scale (0.4); /* CSS3 Animation * * -webkit-animation-name:loading1; -webkit-animation-duration:1.04s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:linear; -moz-animation-name:loading1; -moz-animation-duration:1.04s; -moz-animation-iteration-count:infinite; -moz-animation-direction:linear; -o-animation-name:loading1; -o-animation-duration:1.04s; -o-animation-iteration-count:infinite; -o-animation-direction:linear; } . loading1 > Div:nth-child (1) { left:0; top:36px; /* CSS3 transform-rotate * * -webkit-transform:rotate ( -90DEG); -moz-transform:rotate ( -90DEG); -o-transform:rotate ( -90DEG); /* CSS3 Animation * * -webkit-animation-delay:0.39s; -moz-animation-delay:0.39s; -o-animation-delay:0.39s; } . loading1 > Div:nth-child (2) { left:10px; top:13px; /* CSS3 transform-rotate * * -webkit-transform:rotate ( -45DEG); -moz-transform:rotate ( -45DEG); -o-transform:rotate ( -45DEG); /* CSS3 Animation * * -webkit-animation-delay:0.52s; -moz-animation-delay:0.52s; -o-animation-delay:0.52s; } . loading1 > Div:nth-child (3) { left:34px; top:4px; /* CSS3 transform-rotate * * -webkit-transform:rotate (0DEG); -moz-transform:rotate (0DEG); -o-transform:rotate (0DEG); /* CSS3 Animation * * -webkit-animation-delay:0.65s; -moz-animation-delay:0.65s; -o-animation-delay:0.65s; } . loading1 > Div:nth-child (4) { right:10px; top:13px; /* CSS3 transform-rotate * * -webkit-transform:rotate (45DEG); -moz-transform:rotate (45DEG); -o-transform:rotate (45DEG); /* CSS3 Animation * * -webkit-animation-delay:0.78s; -moz-animation-delay:0.78s; -o-animation-delay:0.78s; } . loading1 > Div:nth-child (5) { right:0; top:36px; /* CSS3 transform-rotate * * -webkit-transform:rotate (90DEG); -moz-transform:rotate (90DEG); -o-transform:rotate (90DEG); /* CSS3 Animation * * -webkit-animation-delay:0.91s; -moz-animation-delay:0.91s; -o-animation-delay:0.91s; } . loading1 > Div:nth-child (6) { right:10px; bottom:9px; /* CSS3 transform-rotate * * -webkit-transform:rotate (135DEG); -moz-transform:rotate (135DEG); -o-transform:rotate (135DEG); /* CSS3 Animation * * -webkit-animation-delay:1.04s; -moz-animation-delay:1.04s; -o-animation-delay:1.04s; } . loading1 > Div:nth-child (7) { bottom:0; left:34px; /* CSS3 transform-rotate * * -webkit-transform:rotate (180DEG); -moz-transform:rotate (180DEG); -o-transform:rotate (180DEG); /* CSS3 Animation * * -webkit-animation-delay:1.17s; -moz-animation-delay:1.17s; -o-animation-delay:1.17s; } . loading1 > Div:nth-child (8) { left:10px; bottom:9px; /* CSS3 transform-rotate * * -webkit-transform:rotate ( -135DEG); -moz-transform:rotate ( -135DEG); -o-transform:rotate ( -135DEG); /* CSS3 Animation * * -webkit-animation-delay:1.3s; -moz-animation-delay:1.3s; -o-animation-delay:1.3s; } /* CSS3 keyframes-loading1 * * @-webkit-keyframes Loading1 { 0%{Background-color: #000000} 100%{Background-color: #FFFFFF} } @-moz-keyframes Loading1 { 0%{Background-color: #000000} 100%{Background-color: #FFFFFF} } @-o-keyframes Loading1 { 0%{Background-color: #000000} 100%{Background-color: #FFFFFF} }

As you can see-I use CSS3 animation keyframes, each step (point) is a separation of the delay. Now, check out our second load style elements:

The code is as follows

Copy Code

. loading2 { height:140px; position:relative; width:140px; /* CSS3 Transform-scale * * -webkit-transform:scale (0.6); -moz-transform:scale (0.6); -o-transform:scale (0.6); } . loading2 > Div { Background-color: #FFFFFF; height:25px; Position:absolute; width:25px; /* CSS3 RADIUS * * -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; /* CSS3 Animation * * -webkit-animation-name:loading2; -webkit-animation-duration:1.04s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:linear; -moz-animation-name:loading2; -moz-animation-duration:1.04s; -moz-animation-iteration-count:infinite; -moz-animation-direction:linear; -o-animation-name:loading2; -o-animation-duration:1.04s; -o-animation-iteration-count:infinite; -o-animation-direction:linear; } . loading2 > Div:nth-child (1) { left:0; top:57px; /* CSS3 Animation * * -webkit-animation-delay:0.39s; -moz-animation-delay:0.39s; -o-animation-delay:0.39s; } . loading2 > Div:nth-child (2) { left:17px; top:17px; /* CSS3 Animation * * -webkit-animation-delay:0.52s; -moz-animation-delay:0.52s; -o-animation-delay:0.52s; } . Loading2 > Div:nth-child (3) { left:57px; top:0; /* CSS3 Animation * * -webkit-animation-delay:0.65s; -moz-animation-delay:0.65s; -o-animation-delay:0.65s; } . Loading2 > Div:nth-child (4) { right:17px; top:17px; /* CSS3 Animation * * -webkit-animation-delay:0.78s; -moz-animation-delay:0.78s; -o-animation-delay:0.78s; } . loading2 > Div:nth-child (5) { right:0; top:57px; /* CSS3 Animation * * -webkit-animation-delay:0.91s; -moz-animation-delay:0.91s; -o-animation-delay:0.91s; } . loading2 > Div:nth-child (6) { right:17px; bottom:17px; /* CSS3 Animation * * -webkit-animation-delay:1.04s; -moz-animation-delay:1.04s; -o-animation-delay:1.04s; } . loading2 > Div:nth-child (7) { left:57px; bottom:0; /* CSS3 Animation * * -webkit-animation-delay:1.17s; -moz-animation-delay:1.17s; -o-animation-delay:1.17s; } . loading2 > Div:nth-child (8) { left:17px; bottom:17px; /* CSS3 Animation * * -webkit-animation-delay:1.3s; -moz-animation-delay:1.3s; -o-animation-delay:1.3s; } /* CSS3 keyframes-loading2 * * @-webkit-keyframes Loading2 { 0%{Background-color: #000000} 100%{Background-color: #FFFFFF} } @-moz-keyframes Loading2 { 0%{Background-color: #000000} 100%{Background-color: #FFFFFF} } @-o-keyframes Loading2 { 0%{Background-color: #000000} 100%{Background-color: #FFFFFF} }

I use the same idea here as the first element, but slightly change the style. Finally – Third "load component:

The code is as follows

Copy Code

. loading3 > Div { Background-color: #FFFFFF; border:1px solid #000000; Float:left; height:114px; margin-left:5px; width:30px; opacity:0.1; /* CSS3 Transform-scale * * -webkit-transform:scale (0.8); -moz-transform:scale (0.8); -o-transform:scale (0.8); /* CSS3 Animation * * -webkit-animation-name:loading3; -webkit-animation-duration:1.2s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:linear; -moz-animation-name:loading3; -moz-animation-duration:1.2s; -moz-animation-iteration-count:infinite; -moz-animation-direction:linear; -o-animation-name:loading3; -o-animation-duration:1.2s; -o-animation-iteration-count:infinite; -o-animation-direction:linear; } . Loading3 > Div:nth-child (1) { /* CSS3 Animation * * -webkit-animation-delay:0.24s; -moz-animation-delay:0.24s; -o-animation-delay:0.24s; } . Loading3 > Div:nth-child (2) { /* CSS3 Animation * * -webkit-animation-delay:0.48s; -moz-animation-delay:0.48s; -o-animation-delay:0.48s; } . Loading3 > Div:nth-child (3) { /* CSS3 Animation * * -webkit-animation-delay:0.72s; -moz-animation-delay:0.72s; -o-animation-delay:0.72s; } . Loading3 > Div:nth-child (4) { /* CSS3 Animation * * -webkit-animation-delay:0.96s; -moz-animation-delay:0.96s; -o-animation-delay:0.96s; } . Loading3 > Div:nth-child (5) { /* CSS3 Animation * * -webkit-animation-delay:1.2s; -moz-animation-delay:1.2s; -o-animation-delay:1.2s; } /* CSS3 Keyframes-loading3 * * @-webkit-keyframes Loading3 { 0% { -webkit-transform:scale (1.2); Opacity:1; } 100% { -webkit-transform:scale (0.7); opacity:0.1; } } @-moz-keyframes Loading3 { 0% { -moz-transform:scale (1.2); Opacity:1; } 100% { -moz-transform:scale (0.7); opacity:0.1; } } @-o-keyframes Loading3 { 0% { -o-transform:scale (1.2); Opacity:1; } 100% { -o-transform:scale (0.7); opacity:0.1; } }

This is today's. The three different "load" elements that we just created. I hope everything will be easy for you and the same result as you. Good luck!