AshKey's Logo
ServicesAbout Us

AshKeys

Confessions and Confusions of a Freelance Fullstacker.

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