CSS3 Loading elements
In our new tutorial I will show you how to create pure CSS3 loading elements (without any images). I think that it can be interesting for you in order to decrease amount of extra images in your project. I prepared three different loading elements. Now, lets check how I made them.
Live Demo
download result
So, lets start
Step 1. HTML
You can see here three elements – our ‘loading’ elements. All of them are very easy – parent element with set of inner DIVs.
<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 styles of each ‘loading’ element. Welcome to check styles of first one:
.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 used CSS3 animation with keyframes, each step (point) is separated with delay with each other. Now, please review styles of our second ‘loading’ element:
.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 used here the same idea as for the first element, but, with slightly changed styles. And finally – our third ‘loading’ element:
.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; } }
Live Demo
download result
Conclusion
That is all for today. We have just created three different ‘loading’ elements. I hope that everything have been easy for you and you like result. Good luck!
Hi great snippet! One question, how did you manage to write that thing, and calculate the angles and the rest mathematical staff?
Hello Dimitris,
This is not so difficult my friend, You should always remember that there are only 360 degrees in a circle. You should remember the total time of animation and amount of elements. And after – pure school mathematic :-)
Hello, can you explain the parts of the code? The logic ? How did you make to produce this 8 elements round ?
I am trying to change width and height, and have no luck, since it messes up the entire element. How did you manage to know you needed 100 wide by 80 height ?
Thanks in advance
Thank you very Much… I cant understand how these are been placed in web pages.. Now I understood very clearly… Thank you so much…
It’s nice,but too many code if it use as loading animate…
cavans+JS Loop is better, i think
Do you think so? Try to compare amount of code :-)
I don’t think that there will be very big difference.
Hi Admin
I am a great fan of yours last many three years i am seeing your designs, styles. the main thing is that you uses purely css and html very less j-query codes thats make loading and working so fast and easy.
I think you are great no body can match u in designing, even all the designers of facebook and googles are placed together cannot match you.
I am a new learner. learnt html from ur site never gone to any html school. but hopin to design a site. i hope u will help me.
Thanks
and i love u for ur designs