DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Cover image for I am back with 100 "Dark Mode" CSS loaders
Temani Afif
Temani Afif

Posted on

I am back with 100 "Dark Mode" CSS loaders

It's been a while since the last collection, but here I am with another one. Let's start 2022 with 100 CSS-only loaders. This time, I joined the Dark Side of the force to create "Dark Mode" loaders.

the dark side

Always the same rule: One div = One loader.

Let's go!


Table of content


The Moving

The Infinity II

The Maze

A dot lost in a maze...

The Square

The Circle

The Eyes

They are watching you

The Factory

The Square vs The Circle

The Blob II

The 3D

You don't need 3D Glasses to watch the below!


That's it!

See you next collection ๐Ÿ‘

bye bye


You want to support me?

buy me a coffee

OR

Become a patron

Top comments (29)

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited on

Now I know you are pushing the boundaries of CSS as I can only view about a third of them on my phone (safari is defo the new Internet Explorer! ๐Ÿคฃ), canโ€™t wait to get back to my PC and enjoy these properly as they are always mega entertaining and interesting!

Looks like my hunch was right the other day on Twitter ๐Ÿ˜‰

The dark side is strong with this one! ๐Ÿ’ช

As always an insta โค๏ธ๐Ÿฆ„!

Collapse
 
afif profile image
Temani Afif

I bet it's only the aspect-ratio I am using a lot. If we remove it and use width/height it should be good for all

Collapse
 
grahamthedev profile image
GrahamTheDev

almost certain you are right, finally got to PC, they are ๐Ÿ”ฅ!

Probably my favourite set of the series!

Collapse
 
elmianass profile image
elmiAnass

the best

Collapse
 
madza profile image
Madza • Edited on

The master of loaders is back, stronger than ever ๐Ÿ’ฏ๐Ÿ”ฅ

Collapse
 
prohashim profile image
ProHashim

King ๐Ÿ‘‘

Collapse
 
nathan5x profile image
Sabarinathan Masilamani

Your work is amazing man. Keep inspiring and keep up the great work!

Collapse
 
atulcodex profile image
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ

You are the great loader man, I really appriciate your work

Keep doing brother

Collapse
 
alnahian2003 profile image
Al Nahian

My Gosh ๐Ÿ˜ณ

Trust me @afif bro! I have never seen such a huge and interesting fun collection of CSS Loader like this โค

Good to see them :D

Collapse
 
valeriavg profile image
Valeria

Very niiiice ๐Ÿ˜
Would you mind if I use one of them in my pet project?
What's the license / how can I attribute you?

Collapse
 
afif profile image
Temani Afif

Yes sure, use them :)
No need any attribution ;)

Collapse
 
valeriavg profile image
Valeria

Thank you! I'll add a link to you Dev.to profile then :-)

Collapse
 
amircahyadi profile image
Amir-cahyadi

๐Ÿ‘โค๏ธ

Collapse
 
szymonzakiewicz profile image
Szymon ลปakiewicz

This is GOLD! Awesome work! Big thanks! Have you considered getting all the parts together as an npm "loaders library"? You`d get hundreds of stars for such quality work!

Collapse
 
afif profile image
Temani Afif

I am preparing better than an NPM package ;)

Collapse
 
shibbirahmad profile image
Shibbir Ahmad

GREAT! WELDONE

Collapse
 
brojenuel profile image
Jenuel Oras Ganawed

This has a lot of work,, awesome work mate!

Collapse
 
creativemacmac profile image
creativemacmac

Love the eyes they are so much fun ๐Ÿ˜„

Collapse
 
ruslanubaydullayev profile image
ruslanubaydullayev

It's beautiful!

Collapse
 
guscarpim profile image
Gustavo Scarpim

Niceeee!

18 Useful Github Repositories Every Developer Should Bookmark

18 Useful GitHub repositories every developer should bookmark: everything from learning resources and roadmaps to best practices, system designs, and tools.