JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 546
  • Score
    100M100P100Q117133F
  • License MIT

Package Exports

  • react-spinners-css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-spinners-css) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Spinners CSS Loaders (Angular)

bit components npm version GitHub stars GitHub license Twitter Follow

Amazing collection of pure CSS react spinners components of css spinners for ajax or loading animation based on loading.io.
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
Circle Spinner #7f58af 64px
Default Spinner #7f58af -
DualRing Spinner #7f58af -
Ellipsis Spinner #7f58af -
Facebook Spinner #7f58af -
Grid Spinner #7f58af -
Heart Spinner #7f58af -
Hourglass Spinner #7f58af -
Ring Spinner #7f58af 80px
Ripple Spinner #7f58af -
Roller Spinner #7f58af -
Spinner Spinner #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" />
       <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.

📄 License

MIT