10 CSS Snippets for Creating Loading Spinners

Custom spinners can add a playful touch to your websites and can help to engage your users during loading times. While there are many sites that offer free spinner GIFs, sometimes you may want to create your animations using CSS and SVGs.

That’s where our collection comes in, as we’ve curated a selection of free custom spinners all powered by CSS. Whether you’re designing an Ajax-powered app or just want to add a fun preloader to your site, these snippets are built for the job.

From simple designs to more elaborate animations, our collection offers a range of options to choose from. And the best part? All of the custom spinners are available for free, making it easy to experiment with them and incorporate them into your own projects.

So why settle for a generic spinner when you can create a unique and engaging animation using CSS and SVG? Check out our collection and add some personality to your websites and applications today!

1. Various CSS Spinners by Iulian Savin

This brilliant collection of custom CSS spinners comes from developer Iulian Savin. You’ll find a slew of animation styles in here, from rotating circles to animated bars and even a custom Pong-style loader. These loaders all come as fully usable assets that you can copy & paste right into your own projects.

Just note these spinners can also be downloaded from this GitHub repo.

See the Pen CSS spinners by Iulian Savin

2. Eclipse Spinner by Hakim El Hattab

Here’s a unique spinner that mimics a solar eclipse. Or some kind of light show… I’m not exactly sure, but I know it looks incredible.

The whole thing relies on very little HTML and it’s cut down even smaller thanks to Haml templating. You can compile the Haml and Sass code into plain HTML & CSS if that’s easier for you to customize.

See the Pen CSS Spinner Animation by Hakim El Hattab

3. Super Simple CSS Spinner by Thomas Mandelid

It doesn’t get much simpler than a rotating lit-up circle. And that’s precisely what you’ll find with this design. It’s a super basic code snippet, and the CSS spinner is a true sight to behold.

It’s not one of the most stylish designs in this collection, but it does the job. If you need a basic spinner that’ll match any website, keep this example snippet in mind.

See the Pen Super Simple CSS Spinner by Thomas Mandelid

4. Beaulti Circle by Elias

I’m not exactly sure what the name for Beaulti Circle has to do with anything, but I am sure that this custom CSS spinner is very cool. The animation style is just so fun to look at, and when you realize that this was built entirely using CSS, that’s even more impressive.

I think this spinner is a little too flashy for corporate sites, but if you update the color to a lighter tone and make it a little smaller, it could work for you.

See the Pen Beaulti Circle Load CSS3 by Elias

5. Pure CSS Spinners by zyklus

There’s a really fun mix in here alternating between various colors, plus a spinner of all the colors together in a rainbow. They look pretty radical and tech-focused.

If you like the black design on this spinner, it can work well for your site. Just make sure you customize the spinner’s color to match your layout.

See the Pen Pure CSS Spinners by zyklus

6. Spinners with Font Icons by Keyamoon

Here’s a really fun idea merging CSS animation with icon fonts. In this example, you’ll find a bunch of icons from the Icomoon set. But they’re all animated using CSS to create rotating graphics that look like custom spinners.

Basically, they are custom spinners, just with a bit more to them since they operate on font properties in CSS. Take a look at this snippet and try messing around with the designs. With 15-20 minutes of tinkering, you might like the result.

See the Pen Spinners using Font Icons by Keyamoon

7. Olympic Rings by Boomer

This has to be one of the most creative loaders I’ve seen in a while. If you take the Olympic rings and merge them into an HTML document with a dash of CSS, you get this excellent spinner design.

You will find a small amount of JavaScript code, but it doesn’t directly handle the animation. That code handles the delay, which is easier to manage via JavaScript. Everything else is just CSS. Still, you can turn this into a pure CSS solution with just a few alterations.

See the Pen Olympics CSS Spinner by Boomer

8. Pure CSS Android Preload Spinners by Andre

If you’ve ever used Android, you’ll recognize many of these loading graphics. They certainly aren’t 100% replicas, but they’re pretty darn close.

And this example uses nothing but pure CSS making it an excellent choice for any web developer to dive in.

See the Pen Pure HTML / CSS Android Preloader Spinner by Andre

9. Bounce Delay Loader by Joni Trythall

While this example isn’t technically a spinner, it’s still way too cool to leave out. Developer Joni Trythall created these bouncing loader balls from scratch with a bit of CSS and some creative whimsy.

The code itself runs on Haml and SCSS, but you can easily compile that down to raw HTML and CSS within CodePen. That might be easier to copy & paste into your page if you aren’t familiar with preprocessing.

See the Pen Bounce Delay Loader by Joni Trythall

10. Rotating Dots by Ömer Fatih

Last but certainly not least is this super fun rotating spinner loader. It’s made of smaller dots that all go through a cycle rotation. That means it has been designed to slow down at specific points where all the dots align, then speed up to complete another revolution.

This spinner will turn heads on your page, and it’s also subtle enough that it can blend into any layout with ease. Developer Ömer Fatih created this snippet with simplicity in mind so you can get it working with only eight lines of HTML and less than 50 lines of CSS.

See the Pen Pure CSS Spinner by Ömer Fatih