Latest Posts
Free Graphic Design, PSD Mockup, Icons, Free Fonts and tutorials
HTML & CSS

Creating 6 Modern CSS3 Pre-loader Animations

By admin
Pinterest LinkedIn Tumblr
Creating 6 Modern Css3 Pre-loader Animations - Free Graphic Design, Psd Mockup, Icons, Free Fonts and Tutorials


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;
  }
}

 



Source link

admin

Designers love design freebies. We at AmoHits.com provide our audience with free graphic design and web design resources. We scout the web for free design resources so that you can find them here, in one place.

Related Posts

Write A Comment

Pin It