react-activity

React Activity Indicators

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

• 🔥 8 different animations to choose from
• 🎨 Customizable color, size and animation speed
• 🕺 Small footprint. Only ~7kB if you add a single component to your bundle.
• 🆕 TypeScript support

Demo

Live demo: https://react-activity.lukevella.com

Install

React, ReactDOM are peer dependencies, if you haven't already installed them use:

npm install react-activity react react-dom

Getting Started

Import the activity indicators you would like to use along with its corresponding css file.

import React from "react";
import { render } from "react-dom";

import { Dots } from "react-activity";
import "react-activity/dist/Dots.css";

const App = () => {
  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/dist/Dots";
import "react-activity/dist/Dots.css";

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

Changelog

2.1.0

• Moved away from using style-loader to support apps using server-side rendering. CSS files now need to be imported separately.