CSS Only Loaders

In this article we showcase some examples of progressbars, loading indicators and CSS spinners built purely with CSS – without JavaScript and without images.

1. Google/Material Design Loader

See the Pen xbwVXJ by brunjo (@brunjo) on CodePen.


2. It’s Loading…

See the Pen Loading Text Animation by brunjo (@brunjo) on CodePen.

Click “RERUN” to see the animation.


3. Windows Style Loader

See the Pen Windows 8 Loader by brunjo (@brunjo) on CodePen.


4. Circle Rotation CSS Spinner

See the Pen Spinner by brunjo (@brunjo) on CodePen.


5. Colorful Bar Animation

See the Pen Colorful Bar Loader by brunjo (@brunjo) on CodePen.


6. Signal Loader

See the Pen Signal Loader by brunjo (@brunjo) on CodePen.


7. Snake Loader

See the Pen Spinner by brunjo (@brunjo) on CodePen.


8. Floating Points

See the Pen Loading by brunjo (@brunjo) on CodePen.


9. Bouncing Ball

See the Pen Bouncing Ball by brunjo (@brunjo) on CodePen.


10. Loading Bar

See the Pen XJmbNz by brunjo (@brunjo) on CodePen.


11. Classic loading bar

See the Pen Loading Bar by brunjo (@brunjo) on CodePen.


We hope these small demos are useful for you. They are a great starting point to build one on your own! One of these loading bar we use on pexels.com. Do you also have pure CSS loaders on your site? What is your favorite?

Pexels

Are you looking for free stock photos? Then check out pexels.com.

Pexels – Free Stock Photos

Find free high-quality stock photos.

Start Browsing Free Photos →