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-con…


This content originally appeared on DEV Community and was authored by Ustariz Enzo

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/Learntocreate/videos

See you soon!

Enzo.


This content originally appeared on DEV Community and was authored by Ustariz Enzo


Print Share Comment Cite Upload Translate Updates
APA

Ustariz Enzo | Sciencx (2021-12-03T07:03:08+00:00) How to Create a Loader!. Retrieved from https://www.scien.cx/2021/12/03/how-to-create-a-loader/

MLA
" » How to Create a Loader!." Ustariz Enzo | Sciencx - Friday December 3, 2021, https://www.scien.cx/2021/12/03/how-to-create-a-loader/
HARVARD
Ustariz Enzo | Sciencx Friday December 3, 2021 » How to Create a Loader!., viewed ,<https://www.scien.cx/2021/12/03/how-to-create-a-loader/>
VANCOUVER
Ustariz Enzo | Sciencx - » How to Create a Loader!. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/12/03/how-to-create-a-loader/
CHICAGO
" » How to Create a Loader!." Ustariz Enzo | Sciencx - Accessed . https://www.scien.cx/2021/12/03/how-to-create-a-loader/
IEEE
" » How to Create a Loader!." Ustariz Enzo | Sciencx [Online]. Available: https://www.scien.cx/2021/12/03/how-to-create-a-loader/. [Accessed: ]
rf:citation
» How to Create a Loader! | Ustariz Enzo | Sciencx | https://www.scien.cx/2021/12/03/how-to-create-a-loader/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts