react-spinners-css

by JoshK2

Amazing collection of React spinners components with pure css

219 Stars 15 Forks Last release: 4 months ago (1.2.1) MIT License 154 Commits 9 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

React Spinners CSS Loaders (Vue, Angular)

CircleCI bit components npm version GitHub stars code style: prettier GitHub license Twitter Follow

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 | | -------------- | ------------- | ------------ | ----------------- | ------------- | |

    | 
#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 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(
     
//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.
  • 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 please star and share this project. ๐Ÿ’ซ

โ”How to use with SSR?

  • How to use with Next.js?
    Install 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.

๐Ÿ“„ License

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.