react-css-spinners


!spinners

CSS-only spinners for React from loading.io

- :scissors:   Zero dependencies
- :collision:   Written in TypeScript
- :rocket:   Tree-shaking baked in
- :nail_care:   No extra CSS imports

Demo

Browse components and explore their props with Storybook.

Quick Start

Install the package with npm

``sh
npm i react-css-spinners
`

or yarn - whichever you prefer

`sh
yarn add react-css-spinners
`

Import any spinner and customize it to your liking

`jsx
import { Ellipsis } from 'react-css-spinners'

const Loader = props => (
<>
{/ Use defaults (color #fff, size 64px) /}


{/ Pass props like color and size (more in demo) /}


{/ Pass a CSS class to get full control over styling /}


)
`

Complete info about props can be found in the demo.

Prerequisites

This library imports its styles through JavaScript. To make it work, you may need to tweak your config.

$3

No changes are required, as CRA already handles CSS. Feel free to skip this! :tada:

$3

First, you'd need css-loader to resolve CSS imports

`sh
npm i -D css-loader
`

Next, to render your styles, you can either

- extract CSS into an external file (e.g. style.css) and load it using (with mini-css-extract-plugin) or
- inject CSS into