hub / github.com/alex996/react-css-spinners

github.com/alex996/react-css-spinners @v4.0.2

Chat with this repo

repository ↗ · DeepWiki ↗ · release v4.0.2 ↗ · + Follow

47 symbols 130 edges 51 files 0 documented · 0% ● updated 3y agov4.0.2 · 2020-08-29★ 612 open issues

What it actually does AI analysis from the code graph — generated when you open this

loading…

README

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

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> (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"
/>


<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"
/>


<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.

Extension points exported contracts — how you extend this code

src/Ripple/Ripple.tsx

src/DualRing/DualRing.tsx

Props (Interface)

(no doc)

src/Hourglass/Hourglass.tsx

Props (Interface)

(no doc)

src/Ellipsis/Ellipsis.tsx

Props (Interface)

(no doc)

src/Roller/Roller.tsx

Core symbols most depended-on inside this repo

src/Ring/Ring.story.tsx

custom

called by 0

src/Ring/Ring.story.tsx

basic

called by 0

src/Grid/Grid.story.tsx

custom

called by 0

src/Grid/Grid.story.tsx

Grid

called by 0

src/Grid/Grid.tsx

Shape

Function 29

Interface 18

Languages

TypeScript100%

Modules by API surface

src/Wave/Wave.tsx3 symbols

src/Roller/Roller.tsx3 symbols

src/Ripple/Ripple.tsx3 symbols

src/Ring/Ring.tsx3 symbols

src/Hourglass/Hourglass.tsx3 symbols

src/Grid/Grid.tsx3 symbols

src/Ellipsis/Ellipsis.tsx3 symbols

src/DualRing/DualRing.tsx3 symbols

src/Circle/Circle.tsx3 symbols

src/Wave/Wave.story.tsx2 symbols

src/Roller/Roller.story.tsx2 symbols

src/Ripple/Ripple.story.tsx2 symbols

For agents

$ claude mcp add react-css-spinners \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact