https://github.com/theanam/css-only-loaders

A collection of animated loaders made with pure CSS and 🖤
https://github.com/theanam/css-only-loaders

css loader spinner

Last synced: 8 months ago
JSON representation

A collection of animated loaders made with pure CSS and 🖤

• Host: GitHub
• URL: https://github.com/theanam/css-only-loaders
• Owner: theanam
• Created: 2019-10-07T06:04:35.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-04T16:21:27.000Z (over 3 years ago)
• Last Synced: 2025-09-21T11:58:09.470Z (9 months ago)
• Topics: css, loader, spinner
• Language: JavaScript
• Homepage: https://theanam.github.io/css-only-loaders/
• Size: 14 MB
• Stars: 64
• Watchers: 2
• Forks: 17
• Open Issues: 9
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
### CSS Only loaders

loaders made with pure CSS and zero bulk. Will be converted to a react component once matured

[![star this repo](http://githubbadges.com/star.svg?user=theanam&repo=css-only-loaders&style=default)](https://github.com/theanam/css-only-loaders)

[![fork this repo](http://githubbadges.com/fork.svg?user=theanam&repo=css-only-loaders&style=default)](https://github.com/theanam/css-only-loaders/fork)

![CSS Only Loaders](https://raw.githubusercontent.com/theanam/css-only-loaders/master/homepage-assets/preview.gif)

#### React component

[![NPM](https://nodei.co/npm/cssonly-loaders-react.png)](https://nodei.co/npm/cssonly-loaders-react/)

**Readme still incomplete**

> This is a work in progress. if you have a cool loader idea, please contribute

#### Contribution guide: 

* Please use [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) in the `looaders/vars.css` file. Make sure the custom measurements in your loader is related to the values in the vars file. Use [calc](https://developer.mozilla.org/en-US/docs/Web/CSS/calc) if necessary.

* Please make sure the folder name in the `loaders` folder, the css file name and the class name is the same. This is **Important** for the automatic defination loading to work.

* If you want your loader to be added to the react component as well, add the referenece to the CSS file to the `react/src/index.js` file. As the files are placed two folder above use a format like this: `import "../../loaders/simple-circle/simple-circle.css";`. Should be enough to include it to the react component once a new version is released on npm.

#### Seeking help for: 

* Vue component 

* Angular Component

* New loader Ideas

The Loader icon on the logo is taken from [Icofont](icofont.com)