one `div` loaders

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

Browse loaders

npm i onedivloaders

or

<link href="https://unpkg.com/onedivloaders@1.0.0/index.css" rel="stylesheet">

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.

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.

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/.

• ✅ 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.

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