10 Free CSS Loading Spinner Snippets For Web Designers & Developers
Custom spinners are a fun way to breathe life into your 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 post 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
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. Seriously, that one is awesome.
These loaders all come as fully usable assets that you can copy/paste right into your own projects.
Just note these spinners also come from this GitHub repo where you can download the source code in full. Usually a bit easier than copy/pasting from CodePen.
2. Eclipse Spinner
Here’s a super unique spinner that mimics a solar eclipse. Or some kind of light show… I’m not exactly sure but I know it looks awesome.
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 too.
3. Super Simple CSS Spinner
It doesn’t get much simpler than a lit-up circle rotating around & around.
And that’s precisely what you’ll find with this design created by Thomas Mandelid. 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 list, but it does the job.
Keep this in mind if you need a basic spinner that’ll match any website.
4. Beaulti Circle
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 crazy cool. The animation style is just so fun to look at, and then you realize this was built entirely using CSS and HTML. That’s even more impressive.
The entire circle design is super clean and minimalist. It’ll grab your attention fast making it perfect for as a custom spinning loader.
I do think it’s a little flashy for corporate sites, but if you update the color to a lighter blue and make it a little smaller this thing could work.
5. Pure CSS Spinners
Developer Mark Kahn put together these pure CSS spinners for your enjoyment.
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 w/ Font Icons
Here’s a really fun idea merging custom CSS3 animation with free icon fonts.
In this pen 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 and try messing around with the designs. With 15-20 minutes of tinkering, you might like the end result.
7. Olympic Rings
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 CSS3 you get this excellent spinner design.
You will find a small amount of JavaScript code, but it does not 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. I almost think the Olympic organizers should add this loader onto their website.
8. Pure CSS Android Preload Spinners
Here’s a pretty cool loading spinner set designed after the typical Android loading graphic.
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 pen uses nothing but pure CSS making it an excellent choice for any web developer to dive in.
9. Bounce Delay Loader
While this example isn’t technically a spinner, it’s still way too cool to leave out of this list.
Developer Joni Trythall created these bouncing loader balls from scratch with a little bit of CSS and some creative whimsy.
The code itself runs on Haml & SCSS but you can easily compile that down to raw HTML/CSS within CodePen. That might be easier to copy/paste into your page if you aren’t familiar with preprocessing.
10. Rotating Dots
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’s designed to slow down at certain points where all the dots align together, then speed up to complete another revolution.
No doubt this spinner will turn heads on your page. 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.
A fantastic minimalist spinner with a little extra something to hold your attention.
The post 10 Free CSS Loading Spinner Snippets For Web Designers & Developers appeared first on Speckyboy Web Design Magazine.