CSS-only spinners for React from loading.io
- ✂️ Zero dependencies
- 💥 Written in TypeScript
- 🚀 Tree-shaking baked in
- 💅 No extra CSS imports
Browse components and explore their props with Storybook.
Install the package with npm
npm i react-css-spinnersor yarn - whichever you prefer
yarn add react-css-spinnersImport any spinner and customize it to your liking
import { Ellipsis } from 'react-css-spinners' const Loader = props => ( <> {/* Use defaults (color #fff, size 64px) */} <Ellipsis /> {/* Pass props like color and size (more in demo) */} <Ellipsis color="#ffdf00" size={40} /> {/* Pass a CSS class to get full control over styling */} <Ellipsis className="my-ellipsis" /> </> )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! 🎉
First, you'd need css-loader to resolve CSS imports
npm i -D css-loaderNext, to render your styles, you can either
- extract CSS into an external file (e.g.
style.css) and load it using<link>(withmini-css-extract-plugin) or - inject CSS into
<style>tag(s) in<head>section at runtime (i.e. when JS is executing, withstyle-loader)
Generally, you'd want to generate your CSS only once at build time, so we'll go with the former
npm i -D mini-css-extract-pluginLastly, add the following to your webpack.config.js
module: { rules: [ { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] } ] }, plugins: [new MiniCssExtractPlugin()]For more advanced options (caching, minification, etc.), see mini-css-extract-plugin docs.
As with the config above, you'd need css-loader. Unfortunately, you can't use either mini-css-extract-plugin or style-loader with server-side rendering. One workaround would be to ignore CSS in server config and instead extract it out on the front-end. In your webpack.config.js
module.exports = [ { module: { rules: [ { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] } ] }, plugins: [new MiniCssExtractPlugin()] }, { module: { target: 'node', rules: [ { test: /\.css$/, loader: 'css-loader', options: { onlyLocals: true } } ] } } ]There are a few other caveats, so it's best to check with a working SSR example. An alternative to this would be to use isomorphic-style-loader. There is also babel-plugin-css-modules-transform that can strip away require statements on CSS files (you'd need to include react-css-spinners under babel-loader).
If you use Rollup, consider rollup-plugin-postcss. It exposes an extract option to extract your styles into a .css file. Alternatively, you could use rollup-plugin-scss or rollup-plugin-css-only which would do the same thing.
Parcel comes with built-in support for .css files and @imports, so this library should work out of the box.
Be advised that it's recommended to use NPM for best performance and minimal CSS & JS footprint.
For development and debugging, use an unminified version
<link rel="stylesheet" crossorigin="anonymous" href="https://unpkg.com/react-css-spinners@latest/dist/style.css" /> <!-- Include react, react-dom, and prop-types development <script> tags above --> <script crossorigin src="https://unpkg.com/react-css-spinners@latest/dist/bundle.js"></script>In production, use a minified and optimized version
<link rel="stylesheet" crossorigin="anonymous" href="https://unpkg.com/react-css-spinners@latest/dist/style.min.css" /> <!-- Include react and react-dom production <script> tags above --> <script crossorigin src="https://unpkg.com/react-css-spinners@latest/dist/bundle.min.js"></script>To allow for customization, the library uses CSS variables which are supported on all major browsers except IE 11.
You will find further demos under /examples folder
Read about the rationale for the styling solution and build toolchain.
CSS spinners from loading.io are used under CC0 license.