Loading

Topographic draw-in loading state.

<mm-loading caption="Surveying shop.orders.v2…"></mm-loading>

<mm-loading caption="Cataloguing postgres-shop">
  <mm-progress hide-label label="Cataloguing assets" value="412" max="1280" unit="assets" readout-position="below"></mm-progress>
</mm-loading>

Guidance

The loading state is a survey being drawn: a patch of the abstract topography field, cropped and dissolving at its edges, whose hairlines ink themselves in behind the caption. It appears after a 200ms delay so fast loads never flash, and then stays for at least 400ms. Under reduced motion the lines appear at once. The field is background, never an icon: the caption (and its live announcement) carries the meaning. For long operations, slot an mm-progress with a real count ("412 / 1,280 assets") rather than leaving people with an open-ended drawing.

Toggle active to finish loading rather than removing the element, so the 400ms minimum holds.

Properties

Property	Attribute	Type	Default	Description
active	active	boolean	true	Whether something is loading. The field appears 200ms after this turns on and stays at least 400ms.
caption	caption	string	''	Visible caption, e.g. "Surveying shop.orders.v2…". Also the announced text; defaults to "Loading".
seed	seed	number	7	Ground seed. The same seed always draws the same field.
density	density	'sparse' | 'normal'	'sparse'	sparse (the default) or normal line density.
width	width	number	160	Minimum width of the field patch in px.
height	height	number	96	Minimum height of the field patch in px.

Slots

Slot	Description
Default	Optional progress, usually an mm-progress with a count.

CSS parts

Part	Description
drawing	The background field SVG.
caption	The caption text.

CSS custom properties

Property	Description
--mm-loading-gap	Space between caption and progress.

Examples

Every state of mm-loading in Storybook, with keyboard and screen reader tests.