Many times when the web pages are being loaded we observe a small piece of animation which lets us know that the content is being loaded. Pre-loaders are a good element in modern web design as it reduces the chance of users leaving your website during the period when the content is loading.
Today we will be creating 6 Modern Pre-loader Animations with the help of CSS3 animations.
NOTE: The vendor prefixed code is in the codepen examples
[metaslider id=6335]
Loader 1 – Circular Quarters
In this preloader the 4 quarters of a circle transforms into 4 different smaller circles, moves away in different corners and finally returns back to become a single circle.
See the Pen QjWBOx by Rohan Kapoor (@Aarkay) on CodePen.
HTML
The four quarters of the circle are created using four span elements which are placed in a parent div element.
<div id = 'loader_1'>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
CSS
Each span element has it’s own animation. The animation basically converts the quarters to circles by adjusting their border-radius property and moves them away a little in their respective corners using the transform property.
body {
background-color: #e9f3f5;
min-height: 100%;
}
#loader_1 {
position: absolute;
left: 45%;
top: 45%;
width: 100px;
height: 100px;
}
#loader_1 span {
display: block;
width: 50px;
height: 50px;
position: absolute;
}
#loader_1 span:nth-child(1) {
border-radius: 100px 0 0 0;
background: #54acd2;
animation: loader_1_1 3s infinite;
}
#loader_1 span:nth-child(2) {
left: 50px;
border-radius: 0 100px 0 0;
background: #e14a39;
animation: loader_1_2 3s infinite;
}
#loader_1 span:nth-child(3) {
top: 50px;
border-radius: 0 0 0 100px;
background: #fcc312;
animation: loader_1_3 3s infinite;
}
#loader_1 span:nth-child(4) {
top: 50px;
left: 50px;
border-radius: 0 0 100px 0;
background: #1bbc9b;
animation: loader_1_4 3s infinite;
}
@keyframes loader_1_1 {
0% {
transform: translateX(0px) translateY(0px) rotate(0deg);
}
15% {
border-radius: 50px;
}
30% {
transform: translateX(-100px) translateY(-100px) rotate(-720deg);
border-radius: 50px;
}
70% {
border-radius: 50px;
}
75% {
transform: translateX(0px) translateY(0px);
border-radius: 100px 0 0 0;
}
}
@keyframes loader_1_2 {
0% {
transform: translateX(0px) translateY(0px) rotate(0deg);
}
15% {
border-radius: 50px;
}
30% {
transform: translateX(100px) translateY(-100px) rotate(720deg);
border-radius: 50px;
}
70% {
border-radius: 50px;
}
75% {
transform: translateX(0px) translateY(0px);
border-radius: 0 100px 0 0;
}
}
@keyframes loader_1_3 {
0% {
transform: translateX(0px) translateY(0px) rotate(0deg);
}
15% {
border-radius: 50px;
}
30% {
transform: translateX(-100px) translateY(100px) rotate(-720deg);
border-radius: 50px;
}
70% {
border-radius: 50px;
}
75% {
transform: translateX(0px) translateY(0px);
border-radius: 0 0 0 100px;
}
}
@keyframes loader_1_4 {
0% {
transform: translateX(0px) translateY(0px) rotate(0deg);
}
15% {
border-radius: 50px;
}
30% {
transform: translateX(100px) translateY(100px) rotate(-720deg);
border-radius: 50px;
}
70% {
border-radius: 50px;
}
75% {
transform: translateX(0px) translateY(0px);
border-radius: 0 0 100px 0;
}
Loader 2 – Squarish Circle
The four quarters of a circle rotates to look like a square.
See the Pen ojNRxP by Rohan Kapoor (@Aarkay) on CodePen.
HTML
The four quarters of the circle are created using four span elements which are placed in a parent div element.
<div id = 'loader_2'>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
CSS
A very simple animation which uses the transform property to rotate the quarters.
body {
background-color: #e9f3f5;
min-height: 100%;
}
#loader_2 {
position: absolute;
left: 45%;
top: 45%;
width: 100px;
height: 100px;
}
#loader_2 span {
display: block;
width: 50px;
height: 50px;
position: absolute;
}
#loader_2 span:nth-child(1) {
border-radius: 100px 0 0 0;
animation: loader_2_1 2s infinite;
background: #54acd2;
}
#loader_2 span:nth-child(2) {
left: 50px;
border-radius: 0 100px 0 0;
animation: loader_2_1 2s infinite;
background: #e14a39;
}
#loader_2 span:nth-child(3) {
top: 50px;
border-radius: 0 0 0 100px;
animation: loader_2_1 2s infinite;
background: #fcc312;
}
#loader_2 span:nth-child(4) {
top: 50px;
left: 50px;
border-radius: 0 0 100px 0;
animation: loader_2_1 2s infinite;
background: #1bbc9b;
}
@keyframes loader_2_1 {
0% {
transform: rotate(0deg);
}
20% {
transform: rotate(-180deg);
}
50% {
transform: rotate(-180deg);
}
70% {
transform: rotate(0deg);
}
}
Loader 3 – Kites
A kite shape element diving in 4 smaller kites which are moving to their respective corners and coming back
See the Pen WQbeVO by Rohan Kapoor (@Aarkay) on CodePen.
HTML
Each kite is made of a span element placed in a parent div
<div id = 'loader_3'>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
CSS
Each span rotates and moves along the X or Y axis according to its current position.
body {
background-color: #e9f3f5;
min-height: 100%;
}
#loader_3 {
position: absolute;
left: 45%;
top: 45%;
}
#loader_3 span {
display: block;
width: 40px;
height: 40px;
background: #1eff00;
transform: rotate(-45deg);
position: absolute;
}
#loader_3 span:nth-child(1) {
animation: loader_3_1 2s infinite;
background: #54acd2;
}
#loader_3 span:nth-child(2) {
top: 29px;
left: 29px;
animation: loader_3_2 2s infinite;
background: #e14a39;
}
#loader_3 span:nth-child(3) {
top: 58px;
animation: loader_3_3 2s infinite;
background: #fcc312;
}
#loader_3 span:nth-child(4) {
top: 29px;
left: -29px;
animation: loader_3_4 2s infinite;
background: #1bbc9b;
}
@keyframes loader_3_1 {
30% {
transform: translateY(-100px) rotate(180deg);
}
70% {
transform: rotate(45deg);
}
}
@keyframes loader_3_2 {
30% {
transform: translateX(100px) rotate(180deg);
}
70% {
transform: rotate(45deg);
}
}
@keyframes loader_3_3 {
30% {
transform: translateY(100px) rotate(180deg);
}
70% {
transform: rotate(45deg);
}
}
@keyframes loader_3_4 {
30% {
transform: translateX(-100px) rotate(180deg);
}
70% {
transform: rotate(45deg);
}
}
Loader 4 – Shadow Squares
This animation consists of 5 sqaures where the four squares on the sides one by one disappears into the square in the center.
See the Pen XmKRLb by Rohan Kapoor (@Aarkay) on CodePen.
HTML
Consists of 5 span elements, one for each square.
<div id = 'loader_4'>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
CSS
The squares on the sides shift their position with the help of the position:absolute property and the center square changes color with every collision.
body {
background-color: #e9f3f5;
min-height: 100%;
}
#loader_4 {
position: absolute;
left: 45%;
top: 45%;
}
#loader_4 span {
position: absolute;
display: block;
height: 20px;
width: 20px;
background: #1eff00;
}
#loader_4 span:nth-child(1) {
left: -80px;
background: #54acd2;
animation: loader_4_1 5s infinite;
}
#loader_4 span:nth-child(2) {
left: -40px;
background: #e14a39;
animation: loader_4_2 5s infinite;
}
#loader_4 span:nth-child(3) {
left: 40px;
background: #fcc312;
animation: loader_4_3 5s infinite;
}
#loader_4 span:nth-child(4) {
left: 80px;
background: #1bbc9b;
animation: loader_4_4 5s infinite;
}
#loader_4 span:nth-child(5) {
background: #39484e;
animation: loader_4_5 5s infinite;
}
@keyframes loader_4_1 {
10% {
left: -10px;
opacity: 0;
}
20% {
opacity: 0;
left: -5px;
}
70% {
opacity: 0;
left: 0;
}
80% {
left: -80px;
opacity: 1;
}
}
@keyframes loader_4_2 {
35% {
opacity: 1;
left: -40px;
}
40% {
left: -10px;
opacity: 0;
}
50% {
opacity: 0;
left: -5px;
}
70% {
opacity: 0;
left: 0;
}
80% {
left: -40px;
opacity: 1;
}
}
@keyframes loader_4_3 {
50% {
opacity: 1;
left: 40px;
}
55% {
left: 10px;
opacity: 0;
}
65% {
opacity: 0;
left: 5px;
}
70% {
opacity: 0;
left: 0;
}
80% {
left: 40px;
opacity: 1;
}
}
@keyframes loader_4_4 {
20% {
opacity: 1;
left: 80px;
}
25% {
left: 10px;
opacity: 0;
}
35% {
opacity: 0;
left: 5px;
}
70% {
opacity: 0;
left: 0;
}
80% {
left: 80px;
opacity: 1;
}
}
@keyframes loader_4_5 {
20% {
background: #54acd2;
}
35% {
background: #1bbc9b;
}
50% {
background: #e14a39;
}
65% {
background: #fcc312;
}
75% {
background: #39484e;
}
}
Loader 5 – Revolving Boxes
A simple animation with boxes continuously revolving and taking each others place.
See the Pen wKgvgp by Rohan Kapoor (@Aarkay) on CodePen.
HTML
<div id = 'loader_5'>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
CSS
body {
background-color: #e9f3f5;
min-height: 100%;
}
#loader_5 {
position: absolute;
left: 45%;
top: 45%;
}
#loader_5 span {
position: absolute;
display: block;
height: 20px;
width: 20px;
background: #1eff00;
}
#loader_5 span:nth-child(1) {
background: #54acd2;
transform: none;
animation: loader_5_1 3s infinite ease-in-out;
}
#loader_5 span:nth-child(2) {
background: #e14a39;
transform: translateX(40px);
animation: loader_5_2 3s infinite ease-in-out;
}
#loader_5 span:nth-child(3) {
background: #fcc312;
transform: translateX(40px) translateY(40px);
animation: loader_5_3 3s infinite ease-in-out;
}
#loader_5 span:nth-child(4) {
background: #1bbc9b;
transform: translateY(40px);
animation: loader_5_4 3s infinite ease-in-out;
}
@keyframes loader_5_1 {
25% {
transform: translateX(40px);
}
50% {
transform: translateX(40px) translateY(40px);
}
75% {
transform: translateY(40px);
}
100% {
transform: none;
}
}
@keyframes loader_5_2 {
25% {
transform: translateX(40px) translateY(40px);
}
50% {
transform: translateY(40px);
}
75% {
transform: none;
}
100% {
transform: translateX(40px);
}
}
@keyframes loader_5_3 {
25% {
transform: translateY(40px);
}
50% {
transform: none;
}
75% {
transform: translateX(40px);
}
100% {
transform: translateX(40px) translateY(40px);
}
}
@keyframes loader_5_4 {
25% {
transform: none;
}
50% {
transform: translateX(40px);
}
75% {
transform: translateX(40px) translateY(40px);
}
100% {
transform: translateY(40px);
}
}
Loader 6 – Magical Boxes
Another animation with boxes
See the Pen PPWwwd by Rohan Kapoor (@Aarkay) on CodePen.
HTML
<div id = 'loader_6'>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
CSS
The opacity of other boxes changes when the first box covers each of them one by one.
body {
background-color: #e9f3f5;
min-height: 100%;
}
#loader_6 {
position: absolute;
left: 45%;
top: 45%;
}
#loader_6 span {
position: absolute;
display: block;
height: 20px;
width: 20px;
background: #1eff00;
}
#loader_6 span:nth-child(1) {
background: #54acd2;
transform: none;
animation: loader_6_1 4s infinite;
z-index:100;
}
#loader_6 span:nth-child(2) {
background: #e14a39;
transform: translateX(40px);
animation: loader_6_2 4s infinite;
}
#loader_6 span:nth-child(3) {
background: #fcc312;
transform: translateX(40px) translateY(40px);
animation: loader_6_3 4s infinite;
}
#loader_6 span:nth-child(4) {
background: #1bbc9b;
transform: translateY(40px);
animation: loader_6_4 4s infinite;
}
@keyframes loader_6_1 {
10% {
transform: translateX(40px);
}
20% {
transform: translateX(40px) translateY(40px);
}
30% {
transform: translateY(40px);
}
40% {
transform: none;
}
50% {
transform: translateX(40px);
}
60% {
transform: translateX(40px) translateY(40px);
}
70% {
transform: translateY(40px);
}
80%{transform: none;}
}
@keyframes loader_6_2 {
9% {
opacity: 1;
}
10% {
opacity: 0;
}
49%{ opacity: 0;}
50% {
opacity: 1;
}
}
@keyframes loader_6_3 {
19% {
opacity: 1;
}
20% {
opacity: 0;
}
59%{opacity:0;}
60% {
opacity: 1;
}
}
@keyframes loader_6_4 {
29% {
opacity: 1;
}
30% {
opacity: 0;
}
69%{opacity:0;}
70% {
opacity: 1;
}
}
