Loading Effect Using CSS3

By | October 26, 2013

Loading effect using css3 tutorial is given below. Before css3, loading effect can be done only by Macromedia flash or GIF image. By using css3 animation property, we can do this effect easily

 

 

.box1– outer circle

.box – inner circle

How this works
  • .box1(outer circle) rotates slowly in anti clockwise direction
  • .box(inner circle) rotates fastly in clockwise direction

 

Loading Effect Using CSS3

Loading Effect Using CSS3

HTML Code

[code type=css]

<div class=”box1″>
<div class=”box”>
</div>
</div>

[/code]

 

CSS Code

[code type=css]

.box
{
height: 50px;
width: 50px;
background-color: #ECECEC;
border: 5px solid #000;
border-bottom: 5px solid #FDFDFD;
border-radius: 100px;
margin: 9px auto;

-webkit-animation: load 1s infinite linear;
-moz-animation: load 1s infinite linear;
-ms-animation: load 1s infinite linear;
-o-animation: load 1s infinite linear;
animation: load 1s infinite linear;
}

@-ms-keyframes load {
from { -ms-transform:rotate(0deg);}
to {-ms-transform:rotate( 360deg);}
}
@-moz-keyframes load {
from { -moz-transform:rotate(0deg);}
to {-moz-transform:rotate( 360deg);}
}
@-webkit-keyframes load {
from { -webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}
@keyframes load {
from { transform:rotate(0deg);}
to { transform:rotate( 360deg);}
}
.box1
{
height: 80px;
width: 80px;
background-color: #ECECEC;
border: 5px solid #000;
border-right: 5px solid #FDFDFD;
border-radius: 200px;
-webkit-animation: load1 8s infinite linear;
-moz-animation: load1 8s infinite linear;
-ms-animation: load1 8s infinite linear;
-o-animation: load1 8s infinite linear;
animation: load1 8s infinite linear;
}

@-ms-keyframes load1 {
from { -ms-transform:rotate(360deg);}
to {-ms-transform:rotate( 0deg);}
}
@-moz-keyframes load1 {
from { -moz-transform:rotate(360deg);}
to {-moz-transform:rotate(0deg);}
}
@-webkit-keyframes load1 {
from { -webkit-transform:rotate(360deg);}
to {-webkit-transform:rotate(0deg);}
}
@keyframes load1 {
from { transform:rotate(360deg);}
to { transform:rotate(0deg);}
}

[/code]

4 thoughts on “Loading Effect Using CSS3

Leave a Reply

Your email address will not be published. Required fields are marked *