@lightspeed/cirrus-spinner

Spinner

Spinner component bundles the progress icon and makes it spin.

Installation

First, make sure you have been through the Getting Started steps of adding Cirrus in your application.

If using Yarn:

yarn add @lightspeed/cirrus-spinner

Or using npm:

npm i -S @lightspeed/cirrus-spinner

Usage

Import required styles in your .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

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

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