DEV Community

I built these 5 types of loading animation in HTML and CSS, which do you prefer?

Adeyele Paul on April 22, 2024

As a lover of clean UI design and smooth animations, I've always been fascinated by the creative possibilities of the humble loading state. From mi...
Collapse
 
oculus42 profile image
Samuel Rouse

I particularly love the shapeshifting amorphous blob!

Animations like in this article may be good candidate for embedded CodePen, if you are interested.

Collapse
 
peboy profile image
Adeyele Paul

Yeah, thank you for letting me know

Collapse
 
amiceli profile image
amiceli

Same, this loading is very beautiful.
Thanks for CodePen link, I can look it a long time ^^.

Collapse
 
akbaran profile image
akbaran

I like how compact your code is. I can't believe that people can animate some things using only CSS! My favorite is The Pulsing Dots. Nice work.

Collapse
 
glenngg profile image
Glenn

Really liked the blob loader...

Collapse
 
koteisaev profile image
Kote Isaev - #StandWithUkraine

morphing dots are the best, IMO.
The basic spinner (1st animation) is very good too. I would consider to use centered background with website logo (and larger radius), for cases when site has logo, and loader used for some medium-long page-wide or blocking data loading...

Collapse
 
timawake profile image
Timilehin

This is really nice,it an eye opener

Collapse
 
lisacee profile image
Lisa Cee

I really like the pulsing dots. Staggering the delay is a clever way to get that effect.

Collapse
 
udaygiri profile image
Udaygiri D. Aparnathi

Bro 😎 just mind blowing 😉

Collapse
 
peboy profile image
Adeyele Paul

Thank you!

Collapse
 
udaygiri profile image
Udaygiri D. Aparnathi

Hello @peboy can I have your Instagram I'd so I can follow you and contact you?

Collapse
 
jsm91 profile image
Jesse

They all have a charm about them, but I like the 3rd and 4th best :). The blob has a modern sleekness about it, but I like the simplicity and color of the 4th too ❤️

Collapse
 
jackmutech profile image
Mugisa Jackson

It is waoo and thank you

Collapse
 
navjot369 profile image
Navjot Singh

Pulsing Dots o O o

Collapse
 
listnerjazz profile image
Jazz_listner🇿🇦

I loved them all, in my experience I've always had a problem with the X and Y axis. My problem is I don't know how and when to use them.

Collapse
 
marusoft profile image
Alimi Kehinde Morufudeen

I Love this article. It is well presented and illustrative.

Collapse
 
shjordan profile image
Jordan Humberto de Souza

I liked the 3rd the most.

Collapse
 
govardhana profile image
Govardhana

First one

Collapse
 
supermari0s profile image
Μάριος

Nice 👍 I like the last one !

Collapse
 
raduolivas profile image
Rodolfo Silva

shape shifting is really dope!

Collapse
 
romeorel profile image
Romeo

It's captivating how you illustrate and explain things. Very good writing skill.
You would be a good copywriter.

Collapse
 
peboy profile image
Adeyele Paul

Smiles.... Thank you Romeo 😀

Collapse
 
arize99 profile image
arize

Omo well done.

Collapse
 
bobbyleex profile image
BobbyleeX

Great work, It a very cool animation.

Collapse
 
bart97coder profile image
Bart97coder

really great advice

Collapse
 
citronbrick profile image
CitronBrick

1
I might have chosen 4, if the size difference between the "active" dot & the other 2 was more noticeable.

Collapse
 
akbaran profile image
akbaran

Interesting!

Collapse
 
fadekocodeit profile image
Future_Developer

Awesome! Design

Collapse
 
succidy profile image
Succidy

This is great!!

Collapse
 
happilyai profile image
Happily.ai

awesome

Collapse
 
nkshukla profile image
Naval

The morphing blob was superb. How did you come up with those radius values, just wanna know the thought process yk

Collapse
 
valeria2024 profile image
Valeria

Interesting!

Collapse
 
danishasif profile image
Danish Asif

I was waiting for animation to load 😂