DEV Community

Cover image for How to Create a Loader!
Ustariz Enzo
Ustariz Enzo

Posted on • Updated on

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

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

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

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

Finally, create the animation with a keyframe:

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

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.

Top comments (1)

Collapse
 
isaico profile image
Isaias Garcia

nice one bro!