Loading Indicator

Loading indicators inform users that a process is currently in progress, such as fetching data or submitting a form. The MD3 Expressive Loading Indicator features a unique animation that morphs through seven distinct geometric shapes.

Introduction

The MD3 Expressive Loading Indicator is more than just a spinner. It uses sophisticated SVG path morphing to transition through a sequence of Material Design shapes, creating a fluid and captivating animation. It supports both uncontained and contained styles, making it suitable for various UI contexts.

Anatomy

• Indicator: The morphing geometric shape.
• Container (Contained Variant): A circular background surface that provides contrast.

Variants

Uncontained (Default)

The indicator is rendered directly without a background. This is ideal for placement inside other components like buttons or list items.

Contained

The indicator is placed inside a circular container. This variant is useful for full-screen loading states or when the indicator needs to stand out against a complex background.

Features

Flexible Sizing

The indicator scales perfectly to any size while maintaining the stroke width and animation fidelity.

Expressive Motion

The animation morphs through 7 unique shapes using a continuous loop, providing a sense of constant progress and high-end design.

Usage

Basic Usage

import { LoadingIndicator } from "@bug-on/m3-expressive";

<LoadingIndicator size={48} />

Inside a Button

<Button disabled>
  <LoadingIndicator size={18} />
  Saving...
</Button>

Contained Variant

<LoadingIndicator variant="contained" size={64} />

Best Practices

Do

• Use for processes expected to take between 1 and 5 seconds.
• Provide an aria-label for screen readers (e.g., "Loading...").
• Center the indicator within its parent container.
• Use the contained variant when placing the indicator over images or busy backgrounds.

Don't

• Don't use a loading indicator for processes that take less than 1 second (it may appear as a flash).
• Don't use more than one loading indicator on a single view at the same time.
• Avoid using very large sizes unless it's for a primary full-screen loading state.

Accessibility

• Roles: Use role="progressbar" or role="status" on the container.
• Labels: Always include an aria-label or aria-labelledby.
• Motion: The animation is decorative and doesn't communicate critical information, but it respects system motion preferences.

API Reference

LoadingIndicator