Loading Stages and States¶

Loading stages and states provide visual feedback during content processing, helping users understand that the system is working and content is being prepared.

Spinner Animation¶

Use spinner animations for content loading processes.

Loading player content...

Different Loading Contexts¶

Card Loading State¶

Data Table Loading State¶

Loading data...

Inline Loading¶

Processing request

Loading States with Progress¶

Determinate Progress¶

Uploading files... 75%

Multi-step Loading¶

Initializing environment

Loading dependencies

Compiling assets...

Starting application

Skeleton Loaders¶

Skeleton loaders show a placeholder UI while content is loading:

Best Practices¶

Provide Context: Always include text explaining what is loading
Show Progress: When possible, show determinate progress instead of infinite spinners

CSS Animation¶

Spinner animations work automatically using CSS. The animation is defined as:

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

You can customize the size and color through CSS variables or inline styles.