# How I Built a Loading Animation With One CSS Variable

You have seen loading animations on almost every website, but they hide a neat trick. I rebuilt one from scratch using only HTML and CSS.

In this article you will learn:

*   How to give every element its own number with a CSS variable (--i)
    
*   How to place 15 dots around a circle with rotate and translateY
    
*   How to stagger the animation with animation-delay and calc()
    
*   How @keyframes fades each dot in sequence
    

Live demo: https://muhammaduzairkhalid15.github.io/Dots-Loading-Animation-CSS-Uzi-Solutions/ Source code: https://github.com/MuhammadUzairKhalid15/Dots-Loading-Animation-CSS-Uzi-Solutions

What is the smallest CSS trick that taught you the most? I would love to read your answers.