one `div` loaders

An open-source collection of monochrome loaders (loading spinners) built with pure CSS and one div element.

Browse loaders Share on Twitter

technology

Each loader is built with pure CSS and one div element. CSS variables can be used to customize size, color, and animation properties of the loaders.

design

All loaders are designed on a 24px grid and are fully scalable. The color palette is monochrome, so you can easily customize their look to match your brand.

accessibility

Even though each loader is built with a single div element, it is recommended to add the role="status" attribute and a hidden child element with the loader description to make sure it is accessible for screen readers. Example: https://jsfiddle.net/Lvunp5dh/3/.

keywords

  • loaders
  • preloaders
  • loading spinners
  • animated loaders
  • animated preloaders
  • animated loading spinners

license

  • You can use the loaders in personal and commercial projects free of charge. No attribution is required (though it's always appreciated).
  • 🚫 You cannot use the source code of the loaders to create similar or competing services.

credits

Designed and developed by @esimzikov. Website design by Good Themes.