houzs / react-activity

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

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

Add the stylesheet to your app.

<link href="path/to/react-activity.css" />

If you are using a css preprocesser, you can import the stylesheet from the node_modules folder and it will be bundled with the rest of your css.

@import 'path/to/node_modules/react-activity/dist/react-activity.css';

Import the activity indicator you would like to use and insert it into one of your components as a child.

import React from 'react';
import {render} from 'react-dom';
import {Dots} from 'react-activity';

const App = React.createClass({
  render() {
    return <Dots size={20} />;
  }
});

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 'path/to/node_modules/react-activity/lib/Dots/Dots.css';

And

import React from 'react';
import {render} from 'react-dom';
import Dots from 'react-activity/lib/Dots';

const App = React.createClass({
  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.

License

See LICENSE file.