Contact Us

Creating 6 Modern CSS3 Pre-loader Animations

by | Oct 7, 2021 | Uncategorised

[ad_1]

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

Recommended Deals[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;
  }
}

 

[ad_2]

Source link

Contact Us

 

London

[email protected]

+441322761135

Home

About us

What we do?

Contact us

© 2024 Lux Living Estate. All rights reserved.

Open chat
1
Scan the code
Hello
Can we help you?