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

Basic usage

<Loading loading={true} />

With text

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

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:

// 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;