AshKeys

Confessions and Confusions of Ashok M A. Personal and Professional Blog.

Ashok Mannolu Arunachalam, How toVanilla ComponentsHTMLCSSAccordian
Back

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.

Outcome

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

Component HTML

jsx
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>
</div>
</>
)
}
export default SimpleLoading

Component CSS

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...