Repository files navigation

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 youadd a single component to your bundle.
• 🆕 TypeScript support

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

To run the examples locally, run:

yarn&& yarn start

Then openhttp://localhost:8000 in your browser.

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

npm install react-activity react react-dom

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

importReactfrom"react";import{render}from"react-dom";import{Dots}from"react-activity";import"react-activity/dist/library.css";constApp=()=>{return<Dots/>;};render(<App/>,document.getElementById("app-container"));

To avoid bundling unnecessary code and css to your project, you can import theactivity indicators individually.

importReact,{Component}from"react";import{render}from"react-dom";importDotsfrom"react-activity/dist/Dots";import"react-activity/dist/Dots.css";constApp=()=>{return<Dots/>;};render(<App/>,document.getElementById("app-container"));

• Dots
• Levels
• Sentry
• Spinner
• Squares
• Digital
• Bounce
• Windmill

All indicators support the following props:

• size: number All dimensions of the activity indicators arespecified in ems so play around with a value until you find something thatsuits 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).
• style: React.CSSProperties (default: undefined) Custom styling to be applied to the container.
• className: string (default: undefined) Custom className to be applied to the container.

SeeLICENSE file.