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.
About the author
- Documenting my journey from beginner to full-stack developer
Comments
Join the discussionSetting --i per element and using calc() for animation-delay is a neat way to avoid writing 15 separate rules. One tip: wrap the animation in a prefers-reduced-motion check so people who are sensitive to motion get a static or slower version. Did you try changing the dot count by only editing the rotate angle and the --i values, or does it need other tweaks?
