joshk2 / react-spinners-css

Amazing collection of React spinners components with pure css

React Spinners CSS Loaders (Vue, Angular)

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

react-spinners-css's Issues

THIS IS AMAZING

Just wanted to say thank you!

Add types for Typescript

I tried to use this very promising looking spinner package in a typescript project.
And Typescript's linter told me that:

Could not find a declaration file for module 'react-spinners-css'. '/home/projec_path/node_modules/react-spinners-css/dist/index.js' implicitly has an 'any' type.
  Try `npm install @types/react-spinners-css` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-spinners-css';`ts(7016)

But there doesn't seem to be a @types/react-spinners-css package in the npm registry.
Will you add one, or can you tell me how I can make one by myself and publish it for others?
I never did that before, but I would tackle it after getting help about where to start :)

Kind regards

Next.js compatibility issue

Hi, thanks for your work!
Can you publish a pre compiled version so that we can use it with next.js

You can learn more about it here:
https://nextjs.org/docs/messages/css-modules-npm

Error message:

Help wanted! - support size property

Hey, I want to add support to size property like I started to do in the project
https://github.com/joshK2/react-spinners-css#-list-of-spinners---proptypes-and-default-props

If someone wants to help me, it's with pleasure.

commonJS support missing

Hello,
you might be aware that your spinners can't be directly used on node:

import Circle from './Circle';
^^^^^^

SyntaxError: Cannot use import statement outside a module

Reference:
jaredpalmer/razzle#1241