loaders.css

loaders.css is a collection of loading spinner animations written entirely in CSS, with no JavaScript required. When you are building a website and need something to show users while content is loading, you add one of these animations to a page element using a CSS class name. The animation then runs in the browser using only CSS properties, no scripts involved.

The project focuses on keeping the animations performant. Each one is built using a limited set of CSS properties chosen specifically to avoid triggering expensive browser operations like full-page layout recalculations or pixel repaints. The README links to several articles explaining why this matters for smooth animation on lower-powered devices.

To use it, you include the minified CSS file, create a div element, and add the relevant class name such as ball-pulse or ball-grid-pulse. Each animation requires a specific number of child div elements inside the wrapper. An optional jQuery plugin called loaders.js handles injecting those child divs automatically, so you do not have to count them yourself.

Customization is done through plain CSS. You can change the color by targeting the child div elements and setting a background color, and you can resize the animation using a CSS scale transform. Browser support covers all recent browsers and goes back to Internet Explorer 9.

The library is available on npm and previously on Bower. Community members have also ported the animations to React, Vue, Angular, Ember, iOS, and Android, with links to those ports in the README. The project is MIT licensed.