Loading Spinner Kit For React

Yet another collection of loading spinner components for react apps.

Installation:

# Yarn
$ yarn add react-spinners

# NPM
$ npm install react-spinners --save

Usage:

import React from 'react';
import { RingLoader } from 'react-spinners';

class AwesomeComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true
    }
  }
  render() {
    return (
      <div className='sweet-loading'>
        <RingLoader
          color={'#123abc'} 
          loading={this.state.loading} 
        />
      </div>
    )
  }
}

Spinner types included:

  • BarLoader
  • BeatLoader
  • BounceLoader
  • CircleLoader
  • ClipLoader
  • ClimbingBoxLoader
  • DotLoader
  • FadeLoader
  • GridLoader
  • HashLoader
  • MoonLoader
  • PacmanLoader
  • PropagateLoader
  • PulseLoader
  • RingLoader
  • RiseLoader
  • RotateLoader
  • ScaleLoader
  • SyncLoader

Preview:

Loading Spinner Kit For React

Download Details:

Author: davidhu2000

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/davidhu2000/react-spinners

License: MIT

Add Comment