Create Single-Element Spinners and Loaders with CSSPIN

By Jake Rocheleau. in Toolkit. Updated on November 26, 2017.

You can build some amazing things with CSS3, from custom input fields to dropdowns and even vector graphics. These techniques are quickly overtaking JavaScript, making it easier for developers to craft better user experiences.

One of the trickiest things to build is a loading spinner animation but modern CSS animation even makes that pretty simple.

To save time building from scratch, you can use a library like CSSPIN with tons of pre-defined custom spinners. All of these animations are free to clone and totally open-sourced, so you have full access to edit the code as you wish.

Setting up a spinner with this library is a breeze. You just copy the CSS library into your page, then add the custom HTML elements wherever you want them to appear.

These custom spinners use only one HTML element to create the animation effect. This is huge because the graphic and the animation effect is rendered purely through CSS classes.

And, since you have access to the source code you can replace shapes, colors, sizes, and animation speeds to better suit your projects.

Just note the code does use LESS syntax, so you’ll need to be familiar with that preprocessing language to make any major edits.

But, you can find plenty of plain CSS examples on the main demo page, along with simple instructions on the GitHub page.

If you’re familiar with npm or Bower these are alternative methods for installing the library.

No matter how you get it installed, this is a great CSS animation library to work with. It’s meant to be fully modular with plenty of room for new spinners, new animations, and customizations from other developers.

To learn more and browse through all the documentation, check out the CSSPIN repo on GitHub. The creator also made a small setup video that you can watch below.