---
route: /components/loading
menu: Utility Components
---

import { Playground, Props } from 'docz';
import { Loading } from './Loading.tsx';

# Loading

Loading simply indicates a loading/pending state, you can use it to manage users expectations during async behaviours or waiting times. Internally it uses the `<Progress />` component to show a circular progress indicator.

> This component is not exposed as `mml` string, it is used internally in other mml components and it can be imported to create your custom ones.

## Properties

<Props of={Loading} />

## Basic usage

<Playground>
  <Loading loading={true} />
</Playground>

## With text

<Playground>
  <Loading loading={true} text="Please wait..." />
</Playground>

## Style customization

If your projects include a `sass` compilation step you might customize the overall look and feel of the component through `scss` variables, here are all the available ones with their default values:

```scss
// Loading:
$mml-loading-spacer: $mml-spacer;
$mml-loading-font-size: 88%;

// Progress:
$mml-progress-width: 1em;
$mml-progress-color: #bbb;
$mml-progress-animation-name: mml-animation-dash;
$mml-progress-animation-time: 1.4s;
$mml-progress-animation-ease: ease-in-out;
```