Subscribe

CSS Only Loader

โœ๏ธ

Today we are making an animated loader with only CSS

11 May, 2020 ยท 3 min read

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 CSS lines.

But let's also dive into making some variants.

HTML Structure

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

That's all, folks! Just a straightforward 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 colored 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 you can see in the CodePen, we also have 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

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next ๐Ÿ“–

Bringing perspective to CSS

7 Aug, 2022 ยท 2 min read

Bringing perspective to CSS

Creating a 3D Cylinder shape in CSS

29 Jul, 2022 ยท 3 min read

Creating a 3D Cylinder shape in CSS

Join 1829 devs and subscribe to my newsletter