CSS3 Animated Loading Icon

Muhammed Suhail
May 28, 2016
3.2k
0
0
Blog

index.html.zip

Let us create css3 animated loading icons that are used to make a beautiful loading effect for your websites.

First we will create view,

<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
</div>

There is one Parent div having class name “spinner” and two child divs having classname “bounce1 and bounce2”.

Now its time to play with css3

I will explain each class's properties. First we will create style for spinner (parent div),

.spinner
{
height: 60px;
width: 60px;
position: relative;
margin: 100px 0;
}

For child divs (bounce1 and bounce2)

.bounce1, .bounce2
{
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background: #FFF;
opacity: 0.6;
-moz-animation: spinner 2.0s infinite ease-in-out;
animation: spinner 2.0s infinite ease-in-out;
}

Here I have used n animation property for the child divs. Animation name is “spinner” with delay “2.0s”. If we set delay for both, there won't be any difference in both children so we will set different delay for both divs.

.bounce2
{
animation-delay: -1.0s;
}

Now the bounce1 have 2.0s delya and bounce2 have -1.0s delay. You can see the difference while you are previewing the page. Now let us create the spinner animation :

@keyframes spinner
{
0%,100%{
transform: scale(0.0)
}
50%
{
transform: scale(1.0);
}
}

I am using transform:scale() propery, it will scale the object(here divs), when it is 0, it will be none,i mean height:0 and width:0, when it is 1 the height and width will be 100% of parent div. Here the object will be scaled to 0% and 100%, between these it will scale 1 (50%). here the logic is while opening the page, first bounce1 will be scaled to 0 and it will increase the size (50% scaled to 1),and it will again scaled to 0 (100%). mean while bounce2 will work opposite of this. When bounce1 is scaled to 0 ,bounce2 will be 1 and vice verca.

So the complete code is as follows,