spinner3 (React)

A creative component named Spinner3.

Idea from

http://akveo.com/ngx-admin/pages/dashboard

Website

https://creative-components.github.io/spinner3

Screenshot | Demo

https://codepen.io/g1eny0ung/pen/OYGmYd

How to use

npm i creative-cp-spinner3 --save
// or
yarn add creative-cp-spinner3

Docs

import

// ES Modules
import Spinner3 from 'creative-cp-spinner3'

// Common JS
const Spinner3 = require('creative-cp-spinner3')

For browser use:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
<script src="https://unpkg.com/styled-components@4.2.1/dist/styled-components.min.js"></script>
<script src="https://unpkg.com/creative-cp-spinner3"></script>

See ./docs/index.html for more details.

Props

defaultProps = {
  size: 150,
  spread: 0,
  thickness: 1,
  innerOffset: 10,
  outerOffset: 5,
  animation1: css`
    animation: ${rotate360} 3s linear infinite;
  `,
  animation2: css`
    animation: ${rotate360} 3s linear infinite;
  `,
  animation3: css`
    animation: ${rotate360} 3s linear infinite;
  `
}

Spinner3.size

Spinner's size.

Spinner3.spread

Spinner's spread.

Spinner3.thickness

Spinner's thickness.

Spinner3.innerOffset

Spinner's inner circle's offset.

Spinner3.outerOffset

Spinner's outer circle's offset.

Spinner3.layer1

Spinner3.layer2

Spinner3.layer3

Custom spinner's layers, from outside to inside.

Spinner3.animation1

Spinner3.animation2

Spinner3.animation3

Custom spinner's animations, from outside to inside.

License

Distributed under the The MIT License (MIT).