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

# Loader (лоадер)

Лоадеры используются для отображения времени ожидания.

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

## Простой пример

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

## Размеры

Лоадер может быть двух размеров - `s` и `m` (по умолчанию).

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

## Цвета

Цвет по умолчанию `darkLighter`. Его можно изменить, передав имя цвета из списка цветов конфигурации в свойство `color`. Возможные значения свойства можно найти в разделе `Sandbox` внизу страницы.

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

## Sandbox

<Sandbox Component={Loader} />