Pure CSS Cool Loading Animations and Spinners

Today, I’m going to share pure CSS based cool loading animations and spinners with you. Nowadays, the page loading animation is commonly used in web designing. Before coming up with CSS3, to create loading animation we used jQuery. By using jQuery means that slower the website.

The spinners can be some GIF, SVG or CSS3 animations that show on the page before it loaded.  These animations and Spinners are a source of entertainment because users love to see them before the page load.

Due to the invention of CSS3, things are so easy. That’s why to create different page loading animation also entirely possible. It replaces many of jQuery things and makes them easy to create using them using CSS3 purely.

In this article, I am going to show you how you can create cool looking animations that will show before page load. All of these animations are create CSS3 purely, and you don’t need to understanding JavaScript.

We have prepaid 14 different samples that you can find in the demo and download file.

Pure CSS Cool Loading Animations and Spinners

Do you know what are the Pros and Cons of using CSS loaders and preloaders? Why not a Jquery solution can use or even animated GIF? There isn’t any specific answer to this. It all depends on the situation. But let’s have a look at some ideas.

Advantages

  • The page loaders are very easily editable and allow you to change the duration, speed, color, etc.
  • You can scale loaders as you wish without any quality loss.
  • The preloaders are pretty much faster than Js.
  • It provides fast and smooth animations.
  • Preloaders allow to easily paused using the animation-play-state property

Disadvantages

  • The main disadvantages of using CSS Spinners are, they don’t have the full support of the browser especially IE9.
  • CSS preloader has a heavy CSS markup.
  • These don’t have pointer-events except hover.

There is one way to get browser support is to use Modernizr. Let’s start and see how we can make some creative loading animation.

HTML Structure for Cool Loading Animations

We will start with a pretty simple loader that animate left to right and running infinitely. As you can see the HTML is pretty much simple and have one main div called .loader and then following child divs.

<div class="loader">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
  <div class="bar4"></div>
  <div class="bar5"></div>
  <div class="bar6"></div>
</div>

CSS Styles for Loading Animation

First, we created the main loader that should be its position to be absolute. We need to now set the top and left value 50% and have -50% value of translate (x,y)

.loader {
  margin: 0 auto;
  width: 60px;
  height: 50px;
  text-align: center;
  font-size: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
}

Next, we need to do some animation for child divs fo loader. We set the animation as infinite ease-in-out with a delay of 0.8s

.loader > div {
  height: 100%;
  width: 8px;
  display: inline-block;
  float: left;
  margin-left: 2px;
  -webkit-animation: delay 0.8s infinite ease-in-out;
  animation: delay 0.8s infinite ease-in-out;
}

Last but not least, we have to establish some background for each child divs. Also, we need to add animation delay for second child div to -0.7s and then the following other will have -0.6s and so on.

.loader .bar1 {
  background-color: #754fa0;
}
.loader .bar2 {
  background-color: #09b7bf;
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
.loader .bar3 {
  background-color: #90d36b;
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
.loader .bar4 {
  background-color: #f2d40d;
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
.loader .bar5 {
  background-color: #fcb12b;
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
.loader .bar6 {
  background-color: #ed1b72;
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

Finally, the keyframes running the animation:

@-webkit-keyframes delay {
  0%, 40%, 100% {
    -webkit-transform: scaleY(0.05);
  }
  20% {
    -webkit-transform: scaleY(1);
  }
}
@keyframes delay {
  0%, 40%, 100% {
    transform: scaleY(0.05);
    -webkit-transform: scaleY(0.05);
  }
  20% {
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
  }
}

So this is the end of the tutorial of creating a loading effect. Hope you find it useful.

You Might Be Interested In: