Components · Loading indicator · Use

Loading indicator

Progress and completion are runtime state; the indeterminate indicator has one Material shape sequence.

State

Markup

<script lang="ts">
	import {
		MATERIAL_SHAPE_BY_ID,
		materialShapePath
	} from '@etesie/design-engine/internal/material-shapes';

	const path = materialShapePath(MATERIAL_SHAPE_BY_ID.get('soft-burst')!);
</script>

<div class="loading-indicator-root" data-loading>
	<svg viewBox="0 0 100 100" role="img" aria-label="Loading">
		<path class="loading-indicator-shape" d={path}></path>
	</svg>
</div>