react-css-spinners
react-css-spinners copied to clipboard
alex996
CSS-only spinners for React
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
Demo
Browse components and explore their props with Storybook.
Quick Start
Install the package with npm
npm i react-css-spinners
or yarn - whichever you prefer
yarn add react-css-spinners
Import 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.
Prerequisites
This library imports its styles through JavaScript. To make it work, you may need to tweak your config.
Create-React-App
No changes are required, as CRA already handles CSS. Feel free to skip this! :tada:
Webpack
First, you'd need css-loader to resolve CSS imports
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<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-plugin
Lastly, 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.
Webpack with SSR
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).
Rollup
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
Parcel comes with built-in support for .css files and @imports, so this library should work out of the box.
CDN
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>
Browser Support
To allow for customization, the library uses CSS variables which are supported on all major browsers except IE 11.
Examples
You will find further demos under /examples folder
- UMD via CDN
- Create-React-App
- Server-Side Rendering
Docs
Read about the rationale for the styling solution and build toolchain.
Copyright
CSS spinners from loading.io are used under CC0 license.
alex996