What is this?

3 Pixel Grid is a tiny 3x3 animated indicator driven by simple delay arrays. Each animation is defined by just three values: a name, an array of 9 delay values (one per cell), and a duration. The engine toggles CSS classes on and off with staggered timing to create distinct visual patterns.

Credits

Whenever I see somethign cool or inspiring I immediately want to see if I can replicate it. That's always been how I've learned best. The pixel grid loading concept was originally created by SuCodee for Swift projects. I first came across it through Kevin Grajeda via this post on X, which inspired this web implementation.

How to use

Browse the gallery, find a pattern you like, and click to copy the configuration object. Paste it directly into your project and pass it to the Pixel Grid engine.

Installation

Grab the engine from GitHub. Zero runtime dependencies, under 3KB.

Open source

Pixel Grid is open source. View the code, report issues, or contribute on GitHub.

About me

I've been a designer, deveoper and consultant at various points throughout my career. Currently I run Faculty and Faculty Special Projects.