Amazing collection of React spinners components with pure css

Overview

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

Issues
  • commonJS support missing

    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: https://github.com/jaredpalmer/razzle/issues/1241

    bug 
    opened by jutunen 6
  • New Loader, Orbital Spinner

    New Loader, Orbital Spinner

    Maybe this is a bit much from what you were asking for help. I found your repo on this issue of the React Status newsletter.

    It is a new component spinner, I only added the colour option, but I intend to also add the sizing prop.

    Hope you like it! 👍

    opened by break7533 5
  • Feature/double ring size

    Feature/double ring size

    Added sizing to the double ring component. Now it accepts a size prop.

    Btw, should I change the read me to reflect these changes or do you prefer to be responsible to the changes on the README file?

    opened by break7533 5
  • Add types for Typescript

    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

    opened by seisenreich 4
  • Added several size parameters

    Added several size parameters

    Size added to following components:

    • Default
    • Ellipsis
    • Facebook
    • Grid
    • Hourglass
    • Ripple
    opened by GuilhermeJSilva 3
  • Add Ouroboro Spinner

    Add Ouroboro Spinner

    Added a new spinner

    opened by Cabeda 3
  • Feature/ripple sizing

    Feature/ripple sizing

    Added sizing for the ripple component 👍

    opened by break7533 2
  • Add sizing to ouroboro

    Add sizing to ouroboro

    Started to add sizing property to Ouroboro.

    Note: If it's ok I'll be adding size property to other elements @JoshK2

    opened by Cabeda 1
  • Add sizing to hourglass

    Add sizing to hourglass

    Added sizing to hourglass.

    The alignment of the three spinners with different sizes is different from the others. Is this an issue?

    WhatsApp Image 2019-10-06 at 16 06 33

    opened by Cabeda 1
  • Add sizing ellipsis

    Add sizing ellipsis

    Added sizing to ellipsis. Had to change fixed sizes to relative ones (pixel to percentage)

    opened by Cabeda 1
  • Bump url-parse from 1.5.1 to 1.5.3

    Bump url-parse from 1.5.1 to 1.5.3

    Bumps url-parse from 1.5.1 to 1.5.3.

    Commits
    • ad44493 [dist] 1.5.3
    • c798461 [fix] Fix host parsing for file URLs (#210)
    • 201034b [dist] 1.5.2
    • 2d9ac2c [fix] Sanitize only special URLs (#209)
    • fb128af [fix] Use 'null' as origin for non special URLs
    • fed6d9e [fix] Add a leading slash only if the URL is special
    • 94872e7 [fix] Do not incorrectly set the slashes property to true
    • 81ab967 [fix] Ignore slashes after the protocol for special URLs
    • ee22050 [ci] Use GitHub Actions
    • d2979b5 [fix] Special case the file: protocol (#204)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump tmpl from 1.0.4 to 1.0.5

    Bump tmpl from 1.0.4 to 1.0.5

    Bumps tmpl from 1.0.4 to 1.0.5.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump path-parse from 1.0.6 to 1.0.7

    Bump path-parse from 1.0.6 to 1.0.7

    Bumps path-parse from 1.0.6 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Next.js compatibility issue

    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: Screenshot 2021-05-08 at 2 49 25 AM

    opened by thesabbir 2
  • Help wanted! - support size property

    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.

    help wanted 
    opened by JoshK2 0
Releases(2.0.1)
Owner
Josh Kuttler
Software & Web Developer 💫 💻
Josh Kuttler
A collection of loading indicators animated with CSS for React

react-spinkit A collection of loading indicators animated with CSS for React Currently I've ported all the spinner animations from Spinkit. If you hav

Kyle Mathews 1.4k Oct 2, 2021
:cyclone: Simple react.js component for an inline progress indicator

react-progress-button Simple React component for a circular Progress Button. Demo Install npm install react-progress-button --save Example Controlled

Mathieu Dutour 517 Sep 11, 2021
⚪ SVG-Powered component to easily create skeleton loadings.

SVG-Powered component to easily create placeholder loadings (like Facebook's cards loading). Features ⚙️ Customizable: Feel free to change the colors,

Danilo Woznica 11.6k Oct 13, 2021
Loading Bar (aka Progress Bar) for Redux and React

React Redux Loading Bar A React component that provides Loading Bar (aka Progress Bar) for long running tasks. Consists of: React component — displays

Anton Mironov 914 Sep 20, 2021
react-loader - React component that displays a spinner via spin.js until your component is loaded.

react-loader react-loader provides your React.js component a simple mechanism for rendering a loading spinner (via spin.js) while data is loading, suc

Cognizant Studio 529 Sep 16, 2021
Easy way to block the user from interacting with your UI.

react-block-ui Easy way to block the user from interacting with your UI. About This library contains easy to use components to prevent the user from i

Availity 271 Sep 13, 2021
Make beautiful, animated loading skeletons that automatically adapt to your app.

react-loading-skeleton Make beautiful, animated loading skeletons that automatically adapt to your app. Basic usage Install by npm/yarn with react-loa

David Tang 2.4k Oct 13, 2021
❄️ The ultimate Line Progress Bar UI for React - Supports 🌸 Natural color gradients & ☃️ Coherent border rounding

Frogress ❄️ The ultimate Line Progress Bar UI for React @frogress/line ?? Installation # Install peer depedencies yarn add react react-dom styled-comp

Junho Yeo 12 Sep 6, 2021
Progress component for React and React Native

react-progress-label Progress component for React and React Native Installation yarn add react-progress-label npm install react-progress-label --save

SWIFT CARROT Technologies 95 May 16, 2021
Creates a download handler function and gives progress information

Creates a download handler function and gives progress information

Olavo Parno 57 Sep 15, 2021
3D animated react button component with progress bar.

3D animated react button component with progress bar.

MD. Ariful Alam 68 Oct 5, 2021