• 1
  • 2
Home > Tips

Loading Animation - A Creative CSS3 Loading Animation Free Download

 

 

Loading animation is a frequently-used effect that is used by both web page and software. I was recently approached by our lovely users about how to create CSS3 loading animation and someone asked me to share some creative CSS3 loading animation examples with them.

In this article, I will share several creative CSS3 loading animation examples with you, you guys can free download the examples and I will also show you the CSS structure for the CSS3 loading animation, I hope it will help you understand how to create an exceptional CSS3 loading animation.

Below is the CSS3 loading animation examples I want to share with you, please click the screenshot or the [view the demo] link to preview it or you can click the [Download the demo] link to download the demo directly.

                                                         [View the demo]                 [Download the demo] 



 The CSS Structure of the CSS3 Loading Animation

 

/* STOP ANIMATION */

.stop {
 -webkit-animation-play-state:paused;
 -moz-animation-play-state:paused;
}

/* Loading Circle */
.ball {
 background-color: rgba(0,0,0,0);
 border:5px solid rgba(0,183,229,0.9);
 opacity:.9;
 border-top:5px solid rgba(0,0,0,0);
 border-left:5px solid rgba(0,0,0,0);
 border-radius:50px;
 box-shadow: 0 0 35px #2187e7;
 width:50px;
 height:50px;
 margin:0 auto;
 -moz-animation:spin .5s infinite linear;
 -webkit-animation:spin .5s infinite linear;
}

.ball1 {
 background-color: rgba(0,0,0,0);
 border:5px solid rgba(0,183,229,0.9);
 opacity:.9;
 border-top:5px solid rgba(0,0,0,0);
 border-left:5px solid rgba(0,0,0,0);
 border-radius:50px;
 box-shadow: 0 0 15px #2187e7;
 width:30px;
 height:30px;
 margin:0 auto;
 position:relative;
 top:-50px;
 -moz-animation:spinoff .5s infinite linear;
 -webkit-animation:spinoff .5s infinite linear;
}

@-moz-keyframes spin {
 0% { -moz-transform:rotate(0deg); }
 100% { -moz-transform:rotate(360deg); }
}
@-moz-keyframes spinoff {
 0% { -moz-transform:rotate(0deg); }
 100% { -moz-transform:rotate(-360deg); }
}
@-webkit-keyframes spin {
 0% { -webkit-transform:rotate(0deg); }
 100% { -webkit-transform:rotate(360deg); }
}
@-webkit-keyframes spinoff {
 0% { -webkit-transform:rotate(0deg); }
 100% { -webkit-transform:rotate(-360deg); }
}

/* Second Loadin Circle */

.circle {
 background-color: rgba(0,0,0,0);
 border:5px solid rgba(0,183,229,0.9);
 opacity:.9;
 border-right:5px solid rgba(0,0,0,0);
 border-left:5px solid rgba(0,0,0,0);
 border-radius:50px;
 box-shadow: 0 0 35px #2187e7;
 width:50px;
 height:50px;
 margin:0 auto;
 -moz-animation:spinPulse 1s infinite ease-in-out;
 -webkit-animation:spinPulse 1s infinite linear;
}
.circle1 {
 background-color: rgba(0,0,0,0);
 border:5px solid rgba(0,183,229,0.9);
 opacity:.9;
 border-left:5px solid rgba(0,0,0,0);
 border-right:5px solid rgba(0,0,0,0);
 border-radius:50px;
 box-shadow: 0 0 15px #2187e7;
 width:30px;
 height:30px;
 margin:0 auto;
 position:relative;
 top:-50px;
 -moz-animation:spinoffPulse 1s infinite linear;
 -webkit-animation:spinoffPulse 1s infinite linear;
}

@-moz-keyframes spinPulse {
 0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7;}
 50% { -moz-transform:rotate(145deg); opacity:1; }
 100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spinoffPulse {
 0% { -moz-transform:rotate(0deg); }
 100% { -moz-transform:rotate(360deg);  }
}
@-webkit-keyframes spinPulse {
 0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }
 50% { -webkit-transform:rotate(145deg); opacity:1;}
 100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spinoffPulse {
 0% { -webkit-transform:rotate(0deg); }
 100% { -webkit-transform:rotate(360deg); }
}

/* LITTLE BAR */

.barlittle {
 background-color:#2187e7; 
 background-image: -moz-linear-gradient(45deg, #2187e7 25%, #a0eaff);
 background-image: -webkit-linear-gradient(45deg, #2187e7 25%, #a0eaff);
 border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333;
 width:10px;
 height:10px;
 float:left;
 margin-left:5px;
    opacity:0.1;
 -moz-transform:scale(0.7);
 -webkit-transform:scale(0.7);
 -moz-animation:move 1s infinite linear;
 -webkit-animation:move 1s infinite linear;
}
#block_1{
  -moz-animation-delay: .4s;
 -webkit-animation-delay: .4s;
 }
#block_2{
  -moz-animation-delay: .3s;
 -webkit-animation-delay: .3s;
}
#block_3{
  -moz-animation-delay: .2s;
 -webkit-animation-delay: .2s;
}
#block_4{
  -moz-animation-delay: .3s;
 -webkit-animation-delay: .3s;
}
#block_5{
  -moz-animation-delay: .4s;
 -webkit-animation-delay: .4s;
}
@-moz-keyframes move{
 0%{-moz-transform: scale(1.2);opacity:1;}
 100%{-moz-transform: scale(0.7);opacity:0.1;}
}
@-webkit-keyframes move{
 0%{-webkit-transform: scale(1.2);opacity:1;}
 100%{-webkit-transform: scale(0.7);opacity:0.1;}
}



 Terms and Rules 

It is absolutely free to download and use the CSS3 loading animation, there is no specific terms and rules to download and use it.

If you have problem downloading or editing the CSS3 laoding animation examples, please feel free to contact our technical support team at support@slicemaker.com. We promise to you we can solve whatever problem you are having within 24 hours. Just enjoy the free CSS3 loading animation. 



Choose a SliceMaker Product to Create a Website on Your Own-30 Day Freetrial
SliceMaker Standard V3.6 - Freeware
SliceMaker Standard V3.6 - Freeware
The anyone-can-master webpage making software. You can create exceptional webpage/website on your own even if you're unfamiliar with webpage making.
$0
$0
SliceMaker Platinum V3.6 - Freeware
SliceMaker Platinum V3.6 - Freeware
The bestselling webpage making software, helps you create exceptional webpage/website without writing complicated CSS and DIV codes.
$0
$0
SliceMaker Deluxe V3.6 - Freeware
SliceMaker Deluxe V3.6 - Freeware
The all-in-one webpage making software, helps you create webpage/website of any style. It's the idea tool to create webpage/website.
$0
$0