| route | menu |
|---|---|
/components/loading |
Utility Components |
import { Playground, Props } from 'docz'; import { Loading } from './Loading.tsx';
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
mmlstring, it is used internally in other mml components and it can be imported to create your custom ones.
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;