by Tony Thomas
January 07, 2015
Tony creates pixel-perfect UI kits & icons. His pug, Wednesday, is Medialoot's beloved mascot.
How to Create Animated Pre-loaders using only CSS3
The modern, lightweight alternative to animated image pre-loaders
Pre-loaders are essential on the web, they enhance the user experience by providing visual feedback to the user whilst waiting for content to load. CSS3 pre-loaders are an alternative to image based pre-loaders and have the advantage of being scalable and Retina ready.
Here are 5 examples of pre-loaders that have been created using only HTML5 and CSS3. The code samples provided do not include vendor prefixes such as -webkit- and -moz-.Pre-loader 1 - Double Spinner
Two spinning circles, rotating in opposite directions. The inner circle spins twice as fast as the outer circle, which is defined in the CSS with a shorter animation speed on the inner circle.Example
The HTML
<body style="background-color: #ffb83c;"> <div id="preloader-1"> <span></span> <span></span> </div> </body>
The CSS
#preloader-1 {
position:relative;
}
#preloader-1 span {
position:absolute;
border: 8px solid #fff;
border-top: 8px solid transparent;
border-radius:999px;
}
#preloader-1 span:nth-child(1){
width:80px;
height:80px;
animation: spin-1 2s infinite linear;
}
#preloader-1 span:nth-child(2){
top: 20px;
left: 20px;
width:40px;
height:40px;
animation: spin-2 1s infinite linear;
}
@keyframes spin-1 {
0% {transform: rotate(360deg); opacity: 1;}
50% {transform: rotate(180deg); opacity: 0.5;}
100% {transform: rotate(0deg); opacity: 1;}
}
@keyframes spin-2 {
0% {transform: rotate(0deg); opacity: 0.5;}
50% {transform: rotate(180deg); opacity: 1;}
100% {transform: rotate(360deg); opacity: 0.5;}
}
Pre-loader 2 - Crossing Circles
Two circles which overlap each other as they go back and forth. A separate animation is defined for each circle to reverse the direction of travel.Example
The HTML
<body style="background-color: #4ad3b4;"> <div id="preloader-2"> <span></span> <span></span> </div> </body>
The CSS
#preloader-2 {
position:relative;
}
#preloader-2 span {
position:absolute;
width:30px;
height:30px;
background: #fff;
border-radius:999px;
}
#preloader-2 span:nth-child(1) {
animation: cross-1 1.5s infinite linear;
}
#preloader-2 span:nth-child(2) {
animation: cross-2 1.5s infinite linear;
}
@keyframes cross-1 {
0% {transform: translateX(0px); opacity: 1;}
50% {transform: translateX(80px); opacity: 0.5;}
100% {transform: translateX(0px); opacity: 1;}
}
@keyframes cross-2 {
0% {transform: translateX(80px); opacity: 1;}
50% {transform: translateX(0px); opacity: 0.5;}
100% {transform: translateX(80px); opacity: 1;}
}
Pre-loader 3 - Circle Rotator
A more traditional circular pre-loader. In this example the entire #preloader-3 container div is rotating rather than just solid white section.Example
The HTML
<body style="background-color: #ab69d9;"> <div id="preloader-3"> <span></span> </div> </body>
The CSS
#preloader-3 {
position:relative;
animation: rotate 1s infinite linear;
border: 4px solid rgba(255, 255, 255, .25);
width: 80px;
height: 80px;
border-radius: 999px;
}
#preloader-3 span {
position:absolute;
width:80px;
height:80px;
border: 4px solid transparent;
border-top: 4px solid #fff;
top: -4px;
left: -4px;
border-radius:999px;
}
@keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
Pre-loader 4 - Bouncing Circles
A Mexican wave style effect which is created by delaying the start of the animation with the animation-delay property.Example
The HTML
<body style="background-color: #c1d64a;"> <div id="preloader-4"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </body>
The CSS
#preloader-4 {
position:relative;
}
#preloader-4 span {
position:absolute;
width:16px;
height:16px;
background: #fff;
border-radius: 999px;
animation: bounce 1s infinite linear;
}
#preloader-4 span:nth-child(1) {
left: 0px;
animation-delay: 0s;
}
#preloader-4 span:nth-child(2) {
left: 20px;
animation-delay: 0.25s;
}
#preloader-4 span:nth-child(3) {
left: 40px;
animation-delay: 0.5s;
}
#preloader-4 span:nth-child(4) {
left: 60px;
animation-delay: 0.75s;
}
#preloader-4 span:nth-child(5) {
left: 80px;
animation-delay: 1s;
}
@keyframes bounce {
0% {transform: translateY(0px); opacity: 0.5;}
50% {transform: translateY(-30px); opacity: 1;}
100% {transform: translateY(0px); opacity: 0.5;}
}
Preloader 5 - Radar
A radar style effect, 3 span elements with the same expand and fade effect, each delayed slightly.Example
The HTML
<body style="background-color: #f9553f;"> <div id="preloader-5"> <span></span> <span></span> <span></span> </div> </body>
The CSS
#preloader-5 {
position:relative;
}
#preloader-5 span {
position:absolute;
width:50px;
height:50px;
border: 5px solid #fff;
border-radius:999px;
animation: radar 2s infinite linear;
opacity: 0;
}
#preloader-5 span:nth-child(1) {
animation-delay: 0s;
}
#preloader-5 span:nth-child(2) {
animation-delay: 0.66s;
}
#preloader-5 span:nth-child(3) {
animation-delay: 1.33s;
}
@keyframes radar {
0% {transform: scale(0); opacity: 0;}
25% {transform: scale(0); opacity: 0.5;}
50% {transform: scale(1); opacity: 1;}
75% {transform: scale(1.5); opacity: 0.5;}
100% {transform: scale(2); opacity: 0;}
}
Comments