{"id":37710,"date":"2017-08-23T21:01:56","date_gmt":"2017-08-23T13:01:56","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=37710"},"modified":"2017-11-26T01:57:33","modified_gmt":"2017-11-25T17:57:33","slug":"csspin-spinners-loaders","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/csspin-spinners-loaders\/","title":{"rendered":"Create Single-Element Spinners and Loaders with CSSPIN"},"content":{"rendered":"

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

One of the trickiest things to build is a loading spinner animation<\/strong> but modern CSS animation<\/a> even makes that pretty simple.<\/p>\n

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

Read Also:<\/strong> 20 Awesome Animated Loaders and Spinners<\/a><\/p>\n

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

These custom spinners use only one HTML element<\/strong> to create the animation effect. This is huge because the graphic and the animation effect is rendered purely through CSS classes<\/strong>.<\/p>\n

And, since you have access to the source code you can replace shapes, colors, sizes, and animation speeds<\/strong> to better suit your projects.<\/p>\n

Just note the code does use LESS syntax<\/a><\/strong>, so you\u2019ll need to be familiar with that preprocessing language to make any major edits.<\/p>\n

But, you can find plenty of plain CSS examples<\/strong> on the main demo page<\/a>, along with simple instructions<\/strong> on the GitHub page<\/a>.<\/p>\n

If you\u2019re familiar with npm<\/strong> or Bower<\/a><\/strong> these are alternative methods<\/strong> for installing the library.<\/p>\n

No matter how you get it installed, this is a great CSS animation library to work with. It\u2019s meant to be fully modular<\/strong> with plenty of room for new spinners, new animations, and customizations from other developers.<\/p>\n

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