CSS Only Loader

Today I want to make a basic CSS Loader and show you guys and girls how easy it is to make one yourself.

We can make one with only one div and a couple of lines of CSS.

But let's also dive into making some variants.

HTML Structure

<div class="loader"></div>

That's all folks! Just one simple div.

CSS Basic Loader

.loader {
  border: 16px solid #f4f4f4; /* Background color */
  border-top: 16px solid #8f95d3; /* Animated color */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: load 2s linear infinite;
}
@keyframes load {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Let's break down how this works exactly.

We start by setting a border-color on our element. We make the top border a different color so 25% of our element is now coloured differently.
Border-radius: 50% makes it a round object instead of a square.
We then give it a specific dimension and add our animation.
In our animation we transform the object from zero to 360deg, this will make it spin.

You can see the result in this demo:

See the Pen CSS Only Loader by Chris Bongers (@rebelchris) on CodePen.

CSS Loader alternatives

As mentioned and as you can see in the codepen we have some other options.

For option two (the two bars) we just add another border at the bottom like so:

border-bottom: 16px solid #8f95d3; /* Animated color */

As for the three balls we add a div to our loader and style like such:

.loader-three .ball {
  position: relative;
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
  display: block;
  position: absolute;
  top: 3px;
}
.loader-three .ball:before {
  content: '';
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
  display: block;
  position: absolute;
  left: 19px;
  top: -14px;
}
.loader-three .ball:after {
  content: '';
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
  display: block;
  position: absolute;
  left: 42px;
  top: -21px;
}

This will create three balls on the border with pseudo-elements

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter