Confessions and Confusions of a Freelance Fullstacker.

Ashok Mannolu Arunachalam, How toVanilla ComponentsHTMLCSSAccordian

How to create a simple loading animation

I am learning in detail about the CSS animations recently and I am going to try out some of them here to share.

Simple loading animation

I wanted to create a simple loading animation where three squares fade on and off in a wave manner.


If you got a critical eye, you might notice that the above loading animation is not fluid.

Component HTML

const SimpleLoading = () => {
return (
<div className="flex gap-3">
<span className="bg-black dark:bg-white"></span>
<span className="bg-black dark:bg-white"></span>
<span className="bg-black dark:bg-white"></span>
export default SimpleLoading

Component CSS

span {
width: 100px;
height: 10px;
border-radius: 10px;
animation: 1.5s blink ease-in-out infinite;
animation-direction: alternate;
span:nth-child(2) {
animation-delay: 300ms;
span:nth-child(3) {
animation-delay: 500ms;
@keyframes blink {
0% {
opacity: 0.1;
50% {
opacity: 0.5;
100% {
opacity: 1;

animation-direction: alternate is the key to have the animation back and forth from 100% - 0% keyframes.*

Instead of blinking, how about we make it breath to mean loading...