import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs";
import { Spinner } from "./";

<Meta title="Components/Feedback/Spinner" component={Spinner} />

# Spinner

Spinners provide a visual cue that an action is either processing, awaiting a course of change or a result.

# Import

```
import { Spinner } from "@cloudline/cloudline-styled-components"
```

# Usage

<Canvas withSource="open">
  <Story name="Grid">
    <Spinner variant="grid" />
  </Story>
</Canvas>

<Canvas withSource="open">
  <Story name="Puff">
    <Spinner variant="puff" />
  </Story>
</Canvas>

<Canvas withSource="open">
  <Story name="Oval">
    <Spinner variant="oval" />
  </Story>
</Canvas>

<ArgsTable story="Spinner" />
