React Epic Spinner CSS

This library is the React implementation of Vue epic-spinners by EpicMax

Comparing to react-epic-spinners, this library has some advantages:

1. No need styled-components dependency, which may break your web app because has multiple versions of styled-components.
2. Has smaller size because each components style written in CSS-in-JS paradigm has been generated into separate CSS file. Moreover, you can get optimized CSS file only use spinner component with the help of postcss and purgecss.
3. Ref forwarding if you want to get DOM of our components.

Installation

Using NPM

npm install @achmadk/react-epic-spinner-css

Or Yarn

yarn add @achmadk/react-epic-spinner-css

Demo

An online demo is available here

Usage

import react-epic-spinner-css.css first

import '@achmadk/react-epic-spinner-css/dist/react-epic-spinner-css.css'

Basically, all components accept all props from <div> element, like style, className, onClick, etc. There are optional props provided to customize ones:

• size [number]: Specifies how large the spinner should be rendered
• color [string]: defaults to #fff. Specifies the color of the spinner.
• animationDelay [number]: Specifies the timing of the spinner animation. Lower numbers mean the animations restart faster.

Examples

import { AtomSpinner } from '@achmadk/react-epic-spinner-css'

// In your render function or SFC return
<AtomSpinner color="red">

Components

All components are named exports of the package.

import { ... } from '@achmadk/react-epic-spinner-css'

• AtomSpinner
• BreedingRhombusSpinner
• CirclesToRhombusesSpinner
• FingerprintSpinner
• FlowerSpinner
• FulfillingBouncingCircleSpinner
• FulfillingSquareSpinner
• HalfCircleSpinner
• HollowDotsSpinner
• IntersectingCirclesSpinner
• LoopingRhombusesSpinner
• OrbitSpinner
• PixelSpinner
• RadarSpinner
• ScalingSquaresSpinner
• SelfBuildingSquareSpinner
• SemipolarSpinner
• SpringSpinner
• SwappingSquaresSpinner
• TrinityRingsSpinner

CSS Optimization

1. install @fullhuman/postcss-purgecss and postcss

yarn add -D @fullhuman/postcss-purgecss postcss

2. add postcss.config.js into your app root project

const purgecss = require('@fullhuman/postcss-purgecss')

module.exports = {
  plugins: [
    // only optimize CSS when process.env.NODE_ENV is production
    ...(process.env.NODE_ENV === 'production' ? [purgecss({
      content: [
        './**/*.js',
        './**/*.jsx',
        // if you are using TypeScript, please add this.
        './**/*.ts',
        './**/*.tsx'
      ],
      // include `@achmadk/react-epic-spinner-css` css file to be processed.
      css: ['./node_modules/@achmadk/react-epic-spinner-css/dist/*.css'],
      // remove unused CSS keyframe definitions
      keyframes: true,
      safelist: {
        greedy: [
          // if you are using AtomSpinner, you can add /^atom-spinner/ .
          // in this case, i am using SpringSpinner component
          /^spring-spinner/
        ]
      }
    })] : [])
  ]
}

Known Issues

Because of some bugs with flexbox on Firefox, the following components may not render properly

• ScalingSquaresSpinner
• SwappingSquaresSpinner
• TrinityRingsSpinner

If you know a fix for it, please send a PR :)

To-do List Improvements

[x] Storybook (WIP) [ ] unit testing with jest and @testing-library/*

License

MIT.