Custom spinners are a fun way to breathe life into your web pages. You can find plenty of custom sites offering free spinners as GIFs. But what if you want to create your animations using CSS and SVGs?
Well, that’s the goal of this collection, as I’ll share a bunch of free custom spinners all powered by CSS.
Whether you’re designing an Ajax-powered app or want to add a fun preloader to your site, either way, these snippets are built for the job.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
- 8 Pure CSS Games You Can Play in Your Browser
- 8 Pure CSS Code Snippets for Creating Stunning Border Effects