Pure CSS Cool Loading Animations and Spinners

Pure CSS Cool Loading Animations and Spinners

The page loading animation which build with Pure CSS are commonly used in web designing and today we have ready a few cool spinners which made with pure CSS only.

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 user love to see them before the page load.

Before coming up of CSS3, to create loading animation we used jQuery. By using jQuery means that slower the website.

Due to the invented of CSS3, the 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 which will show before page load. All of these animations are create CSS3 purely, and you don’t need to understanding of Javascript.

We have prepaid 14 different samples which 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 for 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 to change 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 browser especially IE9.
  • CSS preloader has 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.

The Markup

We will start with a pretty simple loader that animates 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>

Loading Style

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, need to add animation delay for second child div to -0.7s and then 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 loading effect. Hope you find it useful.

Code ExamplesYou May Also Like