import { useState } from 'react'
import Loader from '../Loader'
import Row from '../Row'
import { Sandbox } from '@startupjs/docs'

# Loader

Loaders are used to show a wait time.

```jsx
import { Loader } from '@startupjs/ui'
```

## Simple example

```jsx example
return (
  <Loader />
)
```

## Sizes

Loaders can be of two sizes - `s` and `m` (default).

```jsx example
return (
  <Row align='around'>
    <Loader size='s' />
    <Loader size='m' />
  </Row>
)
```

## Colors

Color is `darkLighter` by default. It can be changed by passing color name from the config colors to `color` property. Possible values of property can be found in the `Sandbox` section at the bottom of the page.

```jsx example
return (
  <Row align='around'>
    <Loader />
    <Loader color='success' />
    <Loader color='error' />
    <Loader color='warning' />
  </Row>
)
```

## Sandbox

<Sandbox Component={Loader} />