import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import Preloader from '../Preloader';

<Meta title="Atoms/Preloader" component={Preloader} />

# Preloader
<br />

## `Preloaders` are used to indicate to the user that some data is being loaded.
<br />

### Default
<Canvas>
    <Story name="Default" inline={false}>
        <div style={{ position: 'relative' }}>
            <div>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Suspendisse commodo egestas neque, sed ultricies nunc convallis at.
                </p>
                <p>
                    Maecenas auctor felis posuere, vehicula tortor ut, venenatis urna.
                    Vivamus hendrerit, eros quis rhoncus molestie, lacus risus tristique orci.
                    Fusce efficitur mi at ligula ornare, quis pretium dui mollis.
                </p>
                <p>
                    Fusce sapien justo, sodales eu nibh eget, finibus fringilla nunc.
                    In suscipit cursus metus et posuere. Quisque iaculis metus eget dolor sagittis.
                    Nulla hendrerit ex quis metus pretium, vel posuere tellus congue.
                </p>
            </div>
            <Preloader isLoading />
        </div>
    </Story>
</Canvas>

## Usage Example
```jsx
import Preloader from '@appdirect/sfb-theme-components/src/atoms/preloader/Preloader';

<Preloader isLoading />
```

## Props
<ArgsTable of={Preloader} />
