CommunicationMaterial Design 3

Loading Indicator

Loading indicators inform users that content or data is being fetched or processed. They provide visual feedback during wait times to keep users informed and engaged.

Overview

Loading indicators are used when the duration of a process is unknown or when providing specific progress information is not possible. Unlike progress indicators that show a percentage, loading indicators simply communicate that something is happening. They are commonly displayed as spinners, pulsing dots, or skeleton screens.

Live Preview - Spinner Variants

Border Spinner

Dual Ring

Pulse

Ping

Dots Animation

Bouncing Dots

Fading Dots

Scaling Dots

Wave

Sizes

XS (16px)

SM (24px)

MD (40px)

LG (56px)

XL (80px)

Button Loading States

Skeleton Loading

Brand Properties

The following table shows all CRAFT Loading Indicator properties with their default values and brand-specific mappings.

Property	Type	Material Default	HoB Value	TAE Value
Primary Color	Color picker	`#6750A4`	`#038012`	`#1A5129`
Track Color	Color picker	`#E7E0EC`	`#e5e7eb`	`#e5e7eb`
Skeleton Background	Color picker	`#E7E0EC`	`#e5e7eb`	`#e5e7eb`
Size XS	Input (px)	`16px`	`16px`	`16px`
Size SM	Input (px)	`24px`	`24px`	`24px`
Size MD	Input (px)	`40px`	`40px`	`40px`
Size LG	Input (px)	`56px`	`56px`	`56px`
Size XL	Input (px)	`80px`	`80px`	`80px`
Border Width (SM)	Input (px)	`2px`	`2px`	`2px`
Border Width (MD/LG)	Input (px)	`4px`	`4px`	`4px`
Spin Duration	Input (ms)	`1000ms`	`1000ms`	`1000ms`
Dots Count	Input (number)	`3`	`3`	`3`
Dot Size	Input (px)	`10px`	`12px`	`12px`
Dot Gap	Input (px)	`4px`	`6px`	`6px`
Animation Easing	Dropdown	`linear`	`linear`	`linear`

Overlay Loading

Fetching data...

Accessibility

Use aria-busy="true" on the container being loaded
Provide aria-label for spinners (e.g., "Loading")
Announce loading state changes with aria-live regions
Ensure loading indicators have sufficient color contrast
Do not use only animation to convey loading state - include text when possible
Consider users who prefer reduced motion - provide static alternatives

Best Practices

Do

Show loading indicators immediately when loading starts
Use skeleton screens for content-heavy areas
Place spinners near the content being loaded
Provide loading text for context when helpful

Don't

Show loading indicators for operations under 500ms
Use multiple different loading styles on the same page
Block the entire screen when only part is loading
Forget to handle loading errors gracefully

Related Components

Communication Overview
Progress Indicator - For determinate progress
Progress Components