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.
Browse components and explore their props with Bit.
Install specific react spinner component with npm, yarn or bit without having to install the whole project.
Install components and live demo
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.
<Circle/>
#7f58af
64
""
{}
<Default/>
#7f58af
80
""
{}
<Ellipsis/>
#7f58af
80
""
{}
<DualRing/>
#7f58af
80
""
{}
<Facebook/>
#7f58af
80
""
{}
<Grid/>
#7f58af
80
""
{}
<Heart/>
#7f58af
80
""
{}
<Hourglass/>
#7f58af
32
""
{}
<Ring/>
#7f58af
80
""
{}
<Ripple/>
#7f58af
80
""
{}
<Roller/>
#7f58af
- ""
{}
<Spinner/>
#7f58af
- ""
{}
<Orbitals/>
#7f58af
- ""
{}
<Ouroboro/>
#7f58af
- ""
{}
Using npm to install react-spinners-css:
$ npm i --save react-spinners-cssPlay 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 to play with live demo, and try the spinners before install.
set npm regisetry config(one time action):
npm config set @joshk:registry="https://node-registry.bit.cloud"
and use your favorite package manager:
npm i @joshk/react-spinners-css.heart yarn add @joshk/react-spinners-css.heart bit install @joshk/react-spinners-css.heart
//using npm or yarn import { Circle, Heart } from 'react-spinners-css'; //using bit import { Facebook } from '@joshk/react-spinners-css.facebook'; ... render() { return( <div> <Circle /> //default color is #7f58af <Circle color="red" /> <Circle color="#be97e8" size={200} /> //size prop is number in pixel <Heart /> <Facebook /> //default color is #7f58af <Facebook color="red" /> </div> ) }
You can see the components locally by cloning this repo and doing the following steps:
bit start
.If you like to support my open-source contributions please star and share this project. 💫
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4