CSS-only spinners for React
npm install react-css-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
Browse components and explore their props with Storybook.
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.
This library imports its styles through JavaScript. To make it work, you may need to tweak your config.
No changes are required, as CRA already handles CSS. Feel free to skip this! :tada:
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