Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/JoshK2/react-spinners-css
Amazing collection of React spinners components with pure css
https://github.com/JoshK2/react-spinners-css
animation animations css css-spinners loaders progress react react-spinners spinners
Last synced: about 1 month ago
JSON representation
Amazing collection of React spinners components with pure css
- Host: GitHub
- URL: https://github.com/JoshK2/react-spinners-css
- Owner: JoshK2
- License: mit
- Created: 2019-08-29T07:02:58.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-07-19T05:05:53.000Z (about 1 year ago)
- Last Synced: 2024-07-17T20:39:07.269Z (about 2 months ago)
- Topics: animation, animations, css, css-spinners, loaders, progress, react, react-spinners, spinners
- Language: TypeScript
- Homepage: https://bit.dev/joshk/react-spinners-css
- Size: 3.08 MB
- Stars: 324
- Watchers: 5
- Forks: 20
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome - JoshK2/react-spinners-css - Amazing collection of React spinners components with pure css (TypeScript)
- awesome-react-components - react-spinners-css - Amazing collection of react spinners components. (UI Components / Loader)
- awesome-react - react-spinners-css - Amazing collection of react spinners components.  (UI Components / Loader)
- awesome-react-components - react-spinners-css - Amazing collection of react spinners components. (UI Components / Loader)
- awesome-react-components - react-spinners-css - Amazing collection of react spinners components. (UI Components / Loader)
- fucking-awesome-react-components - react-spinners-css - Amazing collection of react spinners components. (UI Components / Loader)
README
# React Spinners CSS Loaders ([Vue](https://github.com/JoshK2/vue-spinners-css), [Angular](https://github.com/JoshK2/ng-spinners))
[](https://circleci.com/gh/JoshK2/react-spinners-css)
[](https://bit.dev/joshk/react-spinners-css)
[](https://www.npmjs.com/package/react-spinners-css)
[](https://github.com/JoshK2/react-spinners-css/stargazers)
[](https://github.com/prettier/prettier)
[](https://raw.githubusercontent.com/JoshK2/react-spinners-css/master/LICENSE)
[](https://twitter.com/JoshKuttler)
Amazing collection of React spinners components with pure css.
The React spinners are based on loading.io and from all over the web.
If you want to add your own spinner, please follow the [contributing guidelines](CONTRIBUTING.md).
- 💅No extra CSS imports
- ✂️Zero dependencies
- 📦Spinners can be installing separately
## [Live Demo](https://bit.dev/joshk/react-spinners-css)
Browse components and explore their props with [Bit](https://bit.dev/joshk/react-spinners-css).
Install specific react spinner component with npm, yarn or bit without having to install the whole project.
[Install components and live demo](https://bit.dev/joshk/react-spinners-css)
## 🚀 List of Spinners - PropTypes and Default Props
Each component accepts a `color` prop, and few accepts also `size` prop.
The default `color` prop is `#7f58af`.
Component that accepts `size` prop have a default size in pixel.
| Spinner | color: string | size: number | className: string | style: object |
| -------------- | ------------- | ------------ | ----------------- | ------------- |
| `` | `#7f58af` | `64` | `""` | `{}` |
| `` | `#7f58af` | `80` | `""` | `{}` |
| `` | `#7f58af` | `80` | `""` | `{}` |
| `` | `#7f58af` | `80` | `""` | `{}` |
| `` | `#7f58af` | `80` | `""` | `{}` |
| `` | `#7f58af` | `80` | `""` | `{}` |
| `` | `#7f58af` | `80` | `""` | `{}` |
| `` | `#7f58af` | `32` | `""` | `{}` |
| `` | `#7f58af` | `80` | `""` | `{}` |
| `` | `#7f58af` | `80` | `""` | `{}` |
| `` | `#7f58af` | - | `""` | `{}` |
| `` | `#7f58af` | - | `""` | `{}` |
| `` | `#7f58af` | - | `""` | `{}` |
| `` | `#7f58af` | - | `""` | `{}` |
## 📦 Installation
### Using [npm](https://www.npmjs.com/package/react-spinners-css) to install react-spinners-css:
```bash
$ npm i --save react-spinners-css
```
### Play and install react spinners with Bit
Install specific react spinner component with bit, npm or yarn without having to install the whole project.
Using [bit](https://bit.dev/joshk/react-spinners-css) to play with live demo, and try the spinners before install.
set npm regisetry config(one time action):
```bash
npm config set '@bit:registry' https://node.bit.dev
```
and use your favorite package manager:
```bash
npm i @bit/joshk.react-spinners-css.facebook
yarn add @bit/joshk.react-spinners-css.facebook
bit import joshk.react-spinners-css/facebook
```
## 💻 Usage Examples
you can use a random color from [jotils](https://bit.dev/joshk/jotils/get-random-color)
```javascript
//using npm or yarn
import { Circle, Heart } from 'react-spinners-css';
//using bit
import Facebook from '@bit/joshk.react-spinners-css.facebook';
import { getRandomColor } from '@bit/joshk.jotils.get-random-color'
...
render() {
return(
//default color is #7f58af
//size prop is number in pixel
//default color is #7f58af
)
}
```
## 👾 Development
You can see the components locally by cloning this repo and doing the following steps:
- Install dependencies from `package.json`, run: `npm install`.
- Run the app in the development mode, run: `npm run start`.
## 🙌 Contributing
- Pull requests and ⭐ stars are always welcome.
- For bugs and feature requests, please create an issue.
- If you want to add your own spinner, please follow the [contributing guidelines](CONTRIBUTING.md).
- If you want to update or add features to some spinner, please follow the [contributing guidelines](CONTRIBUTING.md).
## 👏🏻 Support my open-source
If you like to support my open-source contributions please star and share this project. 💫
## ❔How to use with SSR?
- How to use with Next.js?
Install [next-transpile-modules](https://www.npmjs.com/package/next-transpile-modules) and set library CSS to be transpiled.
Example configuration with the library package or with a Bit component:
```
// next.config.js
const withTM = require('next-transpile-modules')([
'react-spinners-css',
'@bit/*',
]) // pass the modules you would like to see transpiled
module.exports = withTM()
```
- How to use with Razzle?
Create `razzle.config.js` file and add the following:
```
const nodeExternals = require('webpack-node-externals')
module.exports = {
modify: (config, { target, dev }) => {
config.externals =
target === 'node'
? [
nodeExternals({
whitelist: [
dev ? 'webpack/hot/poll?300' : null,
/\.(eot|woff|woff2|ttf|otf)$/,
/\.(svg|png|jpg|jpeg|gif|ico)$/,
/\.(mp4|mp3|ogg|swf|webp)$/,
/\.(css|scss|sass|sss|less)$/,
/^react-spinners-css/,
/^@bit\/(.*)/,
].filter(Boolean),
}),
]
: []
return config
},
}
```
This is a simple example [based on the Razzle repo](https://github.com/jaredpalmer/razzle/issues/689).
## 📄 License
[MIT](https://github.com/JoshK2/react-spinners-css/blob/master/LICENSE)