🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A library of activity indicators in the form of React components.

Loading React

Documentation

React Activity Indicators

Build Status NPM Downloads

A library of activity indicators in the form of React components.

preview

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.


You May Also Like