# Loading

A component used as a placeholder when content is not yet available or to indicate that an action is being processed.

Tabs: [Guidelines](/components/web/loading/loading.guidelines.md) · [Code](/components/web/loading/loading.code.md)

## Features

- Specify the color of loading dots.

- Specify the size of loading dots.

- Can be used for loading of pages and in overlays.

## Examples

### Page loading

Use this component when the entire page is not yet ready to be rendered. You can (optionally) add a description to clarify the loading state.

```tsx
import {LoadingPage} from '@pleo-io/telescope'
```

```tsx
<LoadingPage>Loading expenses...</LoadingPage>
```

### Overlay loading

Fixed positioned loading visual cue that overlays other content; make sure to disable the underlying interactive elements.

```tsx
import {LoadingOverlay} from '@pleo-io/telescope'

export default () => <LoadingOverlay>Loading expenses...</LoadingOverlay>
```

## Related components

- [Spinner](/components/web/spinner/spinner.guidelines): A component used as a placeholder when content is not yet available or to indicate that an action is being processed.