Skip to content
Amazing collection of React spinners components with pure css
JavaScript CSS HTML
Branch: master
Clone or download

Latest commit

Latest commit c980f06 Nov 4, 2019

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci update bit config in circleci Oct 22, 2019
public first commit Aug 29, 2019
src Add size to Grid Oct 30, 2019
.babelrc first commit Aug 29, 2019
.bitmap export new version to bit.dev Nov 4, 2019
.gitignore update gitignore Sep 3, 2019
.prettierrc.json add prettier format Aug 29, 2019
CONTRIBUTING.md update CONTRIBUTING Oct 6, 2019
LICENSE first commit Aug 29, 2019
README.md Add size to Grid Oct 30, 2019
_config.yml Set theme jekyll-theme-cayman Sep 6, 2019
package-lock.json Hourglass - fix style border in js and export new version to bit.dev Oct 30, 2019
package.json update version to 1.1.7 Nov 4, 2019

README.md

React Spinners CSS Loaders (Vue, Angular)

CircleCI bit components npm version GitHub stars code style: prettier GitHub license Twitter Follow Buy Me A Coffee donate button

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.

  • 💅No extra CSS imports
  • ✂️Zero dependencies
  • 📦Spinners can be installing separately

Live Demo

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

🚀 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
<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 - "" {}

📦 Installation

Using npm to install react-spinners-css:

$ 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 to play with live demo, and try the spinners before install.

set npm regisetry config(one time action):

npm config set '@bit:registry' https://node.bit.dev

and use your favorite package manager:

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

//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(
     <div>
       <Circle /> //default color is #7f58af
       <Circle color="red" />
       <Circle color="#be97e8" size={200} /> //size prop is number in pixel
       <Heart color={getRandomColor()} />
       <Facebook /> //default color is #7f58af
       <Facebook color="red" />
     </div>
   )
}

👾 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.
  • If you want to update or add features to some spinner, please follow the contributing guidelines.

👏🏻 Support my open-source

If you like to support my open-source contributions and feeling generous, feel free to:

ko-fi

📄 License

MIT

You can’t perform that action at this time.