Skip to content

alex996/react-css-spinners

Repository files navigation

react-css-spinners

NPM version Build Status Coverage Status minified-size MIT License

spinners

CSS-only spinners for React from loading.io

  • ✂️   Zero dependencies
  • 💥   Written in TypeScript
  • 🚀   Tree-shaking baked in
  • 💅   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! 🎉

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> (with mini-css-extract-plugin) or
  • inject CSS into <style> tag(s) in <head> section at runtime (i.e. when JS is executing, with style-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

Docs

Read about the rationale for the styling solution and build toolchain.

Copyright

CSS spinners from loading.io are used under CC0 license.