React Loading Icons

A pure SVG zero-dependency React adaptation of Sam Herbert's SVG Loaders library.

Built with React 17 and TypeScript. Check out the Demo!

Also works with JavaScript, of course (supports ESM tree shaking).

Usage

Install from NPM

yarn add react-loading-icons

npm install react-loading-icons

Import all the loaders in a namespaced fashion

You can import all the loaders at once:

import LoadingIcons from 'react-loading-icons'

and use them in a namespaced manner:

<LoadingIcons.Bars />

Import an individual loader

You can also import a single loader:

import { Bars } from 'react-loading-icons'

and use it without any fancy namespacing:

<Bars />

You can even go as far as copying over a single .js file from the dist/components directory to your project — this way you can directly import a certain loading icon without having to import the whole package.

Components

<Audio />
<BallTriangle />
<Bars />
<Circles />
<Grid />
<Hearts />
<Oval />
<Puff />
<Rings />
<SpinningCircles />
<TailSpin />
<ThreeDots />

Options

Each of these components will accept any SVG tag presentation attributes as well as all valid JSX properties (key, onClick, …) as props. Animation speed can be controlled via speed attribute (1 = 100% speed, .5 = 50% speed, 2 = 200%, and so on). The components are also smart about inheriting fill, fillOpacity, stroke, strokeOpactiy and strokeWidth, so these can also easily be controlled.

Common Usage

// renders the Puff icon with a mint green stroke
<Puff stroke="#98ff98" />

// renders the Puff icon's mint green stroke with an opacity of 12.5%
<Puff stroke="#98ff98" strokeOpacity={.125} />

// renders the Puff icon at 75% speed with a mint green stroke with an opacity of 12.5%
<Puff stroke="#98ff98" strokeOpacity={.125} speed={.75} />