DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for CSS Only Loader
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

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>
Enter fullscreen mode Exit fullscreen mode

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);
  }
}
Enter fullscreen mode Exit fullscreen mode

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 */
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

Layoffs: It’s Okay to Not Be Okay