React Activity Indicators
A library of activity indicators in the form of React components.
Demo & Examples
Live demo: http://labs.lukevella.com/react-activity
To run the examples locally, run:
npm install npm start
Then open localhost:8000
in your browser.
Install
npm install react-activity
React, ReactDOM are peer dependencies, if you haven't already installed them use:
npm install react react-dom
Getting Started
Import the activity indicators you would like to use along with the css file. Use the activity indicator component like you would any other component.
import React, { Component } from 'react'; import { render } from 'react-dom'; import { Dots } from 'react-activity'; import 'react-activity/dist/react-activity.css'; class App extends Component { render() { return <Dots />; } } render(<App />, document.getElementById('app-container'))
Optimizing Your Build
To avoid bundling unnecessary code and css to your project, you can import the activity indicators individually.
import React, { Component } from 'react'; import { render } from 'react-dom'; import Dots from 'react-activity/lib/Dots'; import 'react-activity/lib/Dots/Dots.css'; class App extends Component { render() { return <Dots />; } } render(<App />, document.getElementById('app-container'))
Activity Indicators
Dots
Levels
Sentry
Spinner
Squares
Digital
Bounce
Windmill
Properties
size: number
All dimensions of the activity indicators are specified in ems so play around with a value until you find something that suits your needs.color: string
The active color of the indicator.speed: number (Default: 1)
The relative animation speed of the indicator.animating: boolean (Default: true)
Whether to show the indicator (true) or hide it (false).
License
See LICENSE file.