# creative-cp-spinner3

> A creative component named Spinner3.

Latest version **1.0.3** (published 2019-06-08) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install creative-cp-spinner3
pnpm add creative-cp-spinner3
yarn add creative-cp-spinner3
bun add creative-cp-spinner3
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2019-06-08 |
| First published | 2019-06-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 24.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Yue Yang |
| Maintainers | g1eny0ung |
| Keywords | creative, component, spinner, react |

## Links

- npm: https://www.npmjs.com/package/creative-cp-spinner3
- Repository: https://github.com/creative-components/spinner3
- Homepage: https://github.com/creative-components/spinner3#readme
- Issues: https://github.com/creative-components/spinner3/issues
- npm.io page: https://npm.io/package/creative-cp-spinner3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.3 (latest) — 2019-06-08
- 1.0.2 — 2019-06-05
- 1.0.1 — 2019-06-05
- 1.0.0 — 2019-06-05

## README

# spinner3 (React)

![David](https://img.shields.io/david/peer/creative-components/spinner3.svg)
![David](https://img.shields.io/david/dev/creative-components/spinner3.svg)
![npm](https://img.shields.io/npm/v/creative-cp-spinner3.svg)
![NPM](https://img.shields.io/npm/l/creative-cp-spinner3.svg)

A creative component named Spinner3.

## Idea from

[http://akveo.com/ngx-admin/pages/dashboard](http://akveo.com/ngx-admin/pages/dashboard)

## Website

[https://creative-components.github.io/spinner3](https://creative-components.github.io/spinner3)

## Screenshot | Demo

[https://codepen.io/g1eny0ung/pen/OYGmYd](https://codepen.io/g1eny0ung/pen/OYGmYd)

## How to use

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

## Docs

### import

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

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

For browser use:

```html
<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](./docs/index.html) for more details.

### Props

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

---
_Source: https://npm.io/package/creative-cp-spinner3 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._