How to Create a Loader!

Hey fellow creators,

You want to add a loader to your app, but don't know where to start? Look no further!

If you prefer to watch the video version, it's right here :

Here's the source code.

1. The HTML structure.

Create a loader-container with three dots inside it:

<div class="loader-container">
      <div class="dot d1"></div>
      <div class="dot d2"></div>
      <div class="dot d3"></div>
</div>

2. Style the loader.

Style the loader with a position: absolute and make it take the full width and height of the viewport. Then, make sure the three dots are centered in the page:

*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

.loader-container {
  position: absolute;
  background: #f1f1f1;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 1s ease-in-out;
}

3. Animate the loader.

Now, style the dots so that they can be easily seen (make it 25px wide and 25px high) and color them black. Finally, add an animation that you'll create right after this.

.dot {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #000;
  margin: 0 10px;
  animation: loader infinite 0.3s alternate;
}

The key to the animation is to add a delay to the second and third dots' animation:

.d2 {
  animation-delay: 0.05s;
}
.d3 {
  animation-delay: 0.1s;
}

Finally, create the animation with a keyframe:

@keyframes loader {
  100% {
    transform: translateY(-30px);
  }
}

You've created a simple but effective loader in CSS, well done!

Come and take a look at my Youtube channel: https://www.youtube.com/c/TheWebSchool

See you soon!

Enzo.

Comments

[Isaias Garcia]

nice one bro!