How to create Facebook style loading animation using CSS3
Today I am going to write first time on CSS3 and creating Facebook style loading animation without any image, images took more time to load then this simple CSS animation. Using HTML basic element span and CSS3 properties like 3D transform you can create beautiful and lightweight animations. These animations not look like exactly as images but user can understand something happening.
Basic HTML
Create a div container with loadFBstyle id and add 3 span inside that div.
<div class="loadFBstyle"> <span></span> <span></span> <span></span> </div>
CSS required to get static lines:
.loadFBstyle span{ display: inline-block; vertical-align: middle; width: 5px; height: 7px; margin: 50px auto; background: hsl(0, 0%, 94%); border-radius: 0px; -webkit-animation: loading 0.4s infinite alternate; -moz-animation: loading 0.4s infinite alternate; }
This CSS shows 3 vertical lines only
-webkit-animation: loading 0.4s infinite alternate; -moz-animation: loading 0.4s infinite alternate;
Total animation time defined 0.4 second.
CSS to animate lines:
.loadFBstyle span:nth-of-type(2){ -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; } .loadFBstyle span:nth-of-type(3) { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; } @-webkit-keyframes loading { 0% { width: 5px; height: 7px; background: hsl(222, 37%, 47%); -webkit-transform: translateZ(0); } 100% { height: 10px; background: hsl(0, 0%, 94%); -webkit-transform: translateZ(-61px); } } @-moz-keyframes loading { 0% { width: 5px; height: 7px; background: hsl(222, 37%, 47%); -moz-transform: translateZ(0); } 100% { height: 10px; background: hsl(0, 0%, 94%); -moz-transform: translateZ(-61px); } }
span:nth-of-type(n) allow you to select elements on there order here we used 2,3 for second span and 3rd span.
.loadFBstyle span:nth-of-type(2){ -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; }
Delay 0.1s in animation after 1st element for second span. If you want to add more lines do as above and make them animated with delay.
@-moz-keyframes loading { 0% { width: 5px; height: 7px; background: hsl(222, 37%, 47%); -moz-transform: translateZ(0); } 100% { height: 10px; background: hsl(0, 0%, 94%); -moz-transform: translateZ(-61px); } }
Here we used keyframe and loading is the name of animation. Animation start from 0% and end on 100% from start to end we increase size of lines from 7px to 10px.
Support
I hope you like this tutorial and enjoy it feel free to comment bellow.
Tutorial Categories:
LOL, but nice try
Thats nice (Y)
Wow
I have a question : will this load faster than the image ?
Yes it can Just change this animation loading time on this line.
-webkit-animation: loading 0.5s infinite alternate;
Currently its 5s make it 3s it will load faster.
السلام عليكم
thank u so much my daer
how to share and like my website product in facebook if u have this tutorial please send me link my email [email protected] thank u so much