# @lightspeed/cirrus-spinner

> Cirrus Spinner Component

Latest version **5.0.5** (published 2019-02-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @lightspeed/cirrus-spinner
pnpm add @lightspeed/cirrus-spinner
yarn add @lightspeed/cirrus-spinner
bun add @lightspeed/cirrus-spinner
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.0.5 |
| Published | 2019-02-26 |
| First published | 2017-12-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 10.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Lightspeed |
| Maintainers | ahmedelgabri, anomen, inooid, kshahani, kurt.bergeron, lightspeedhq, ls-frederic-bouchard, ls-guillaume-lambert, tombertrand, x.drdak |

## Links

- npm: https://www.npmjs.com/package/@lightspeed/cirrus-spinner
- npm.io page: https://npm.io/package/@lightspeed/cirrus-spinner

## Dependencies (2)

- [classnames](https://npm.io/package/classnames.md) ^2.2.5
- [@lightspeed/cirrus-icon](https://npm.io/package/@lightspeed/cirrus-icon.md) ^7.3.0

## Recent versions

- 5.0.5 (latest) — 2019-02-26
- 6.0.0-beta.1 — 2018-12-03
- 6.0.0-beta.0 — 2018-12-03
- 6.0.0-alpha.0 — 2018-11-29
- 5.0.4 — 2018-10-30
- 5.0.3 — 2018-10-29
- 5.0.2 — 2018-09-06
- 5.0.1 — 2018-08-28
- 5.0.0 — 2018-08-03
- 4.0.1 — 2018-05-29
- 4.0.0 — 2018-05-17
- 3.0.0 — 2018-04-30
- 2.0.2 — 2018-03-16
- 2.0.1 — 2018-02-21
- 2.0.0 — 2018-02-14
- … 8 more at https://npm.io/package/@lightspeed/cirrus-spinner/versions

## README

# Spinner

Spinner component bundles the `progress` icon and makes it spin. 

## Installation

First, make sure you have been through the [Getting Started](https://github.com/lightspeedretail/cirrus#getting-started) steps of adding Cirrus in your application.

If using [Yarn](https://yarnpkg.com/):

```sh
yarn add @lightspeed/cirrus-spinner
```

Or using [npm](https://www.npmjs.com/):

```sh
npm i -S @lightspeed/cirrus-spinner
```

## Usage

Import required styles in your `.scss`:

```scss
@import '@lightspeed/cirrus-spinner/Spinner.scss';
```

### React Component

#### `<Spinner>`

#### Passed down Props to the spinner Icon

>Color or Size properties can be any Cirrus token, ex `green-100` (color), `xlarge` (size) or any CSS value.

| Prop            | Type         | Description                                             |
| --------------- | ------------ | ------------------------------------------------------- |
| `className`     | `string`     | Custom className to add in addition to the default ones |
| `name`          | `string`     | Name of the icon                                        |
| `size`          | `string`     | Default 1rem, can be set to any custom value            |
| `color`         | `string`     | Applied on the svg `fill` property                      |
| `baseColor`     | `string`     | Applied on the base paths `fill` property               |
| `baseColor1`    | `string`     | Applied on the base-1 path `fill` property              |
| `baseColor2`    | `string`     | Applied on the base-2 path `fill` property              |

#### Example

```js
import React from 'react';
import Spinner from '@lightspeed/cirrus-spinner';

const MyComponent = () => (
  <div>
    <Spinner size="large" color="maple-200" />
  </div>
);

export default MyComponent;
```

### CSS Component

#### Component classes

| Type | Class |
| ---- | ----- |
| base | `.cr-spinner` |

### Component HTML

```html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="cr-icon cr-icon-spinner cr-spinner" style="width: 1rem; height: 1rem;">
  <path class="cr-icon__base cr-icon__base-2" d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm0-3A5 5 0 1 0 8 3a5 5 0 0 0 0 10z" opacity=".3"></path>
  <path class="cr-icon__base cr-icon__base-1" d="M8 13a1.5 1.5 0 0 1 0 3A8 8 0 0 1 .323 5.742a1.5 1.5 0 1 1 2.879.846A5 5 0 0 0 8 13z"></path>
</svg>
```

---
_Source: https://npm.io/package/@lightspeed/cirrus-spinner · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._