npm.io
1.0.3 • Published 7 years ago

creative-cp-spinner3

Licence
MIT
Version
1.0.3
Deps
0
Size
24 kB
Vulns
0
Weekly
0
DeprecatedThis package is deprecated

spinner3 (React)

David David npm NPM

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

Keywords