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 & Examples
Live demo: https://react-activity.lukevella.com
To run the examples locally, run:
yarn && yarn start
Then open http://localhost:8000 in your browser.
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 the css file. Use the activity indicator component like you would any other component.
import React from "react";
import { render } from "react-dom";
import { Dots } from "react-activity";
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";
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.