Progress Indicator
Progress indicators express an unspecified wait time or display the length of a process. They inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates.
Linear Progress
Circular Progress
<div style="display: flex; flex-direction: column; gap: 2rem; align-items: center;">
<div style="width: 100%;">
<x-mbc::typography variant="subtitle2" gutterBottom>Linear Progress</x-mbc::typography>
<x-mbc::linear-progress :value="0.7" aria-label="Loading progress" />
</div>
<div>
<x-mbc::typography variant="subtitle2" gutterBottom>Circular Progress</x-mbc::typography>
<x-mbc::circular-progress :value="0.7" aria-label="Loading progress" />
</div>
</div>Linear Progress
Linear progress indicators display progress along a horizontal line. They're commonly used at the top of screens or within cards to show loading states.
25% Complete
50% Complete
75% Complete
100% Complete
<div style="display: flex; flex-direction: column; gap: 1.5rem; width: 100%;">
<div>
<x-mbc::typography variant="body2" gutterBottom>25% Complete</x-mbc::typography>
<x-mbc::linear-progress :value="0.25" aria-label="25 percent complete" />
</div>
<div>
<x-mbc::typography variant="body2" gutterBottom>50% Complete</x-mbc::typography>
<x-mbc::linear-progress :value="0.5" aria-label="50 percent complete" />
</div>
<div>
<x-mbc::typography variant="body2" gutterBottom>75% Complete</x-mbc::typography>
<x-mbc::linear-progress :value="0.75" aria-label="75 percent complete" />
</div>
<div>
<x-mbc::typography variant="body2" gutterBottom>100% Complete</x-mbc::typography>
<x-mbc::linear-progress :value="1.0" aria-label="100 percent complete" />
</div>
</div>
Note: The value prop accepts a float between 0 and 1, where 0.5 represents 50% progress. The aria-label attribute is required for accessibility.
Circular Progress
Circular progress indicators display progress by animating an indicator along a circular track. They're ideal for confined spaces or when showing progress inline.
25%
50%
75%
100%
<div style="display: flex; gap: 2rem; align-items: center; justify-content: center; flex-wrap: wrap;">
<div style="text-align: center;">
<x-mbc::circular-progress :value="0.25" aria-label="25 percent progress" />
<x-mbc::typography variant="caption" style="display: block; margin-top: 8px;">25%</x-mbc::typography>
</div>
<div style="text-align: center;">
<x-mbc::circular-progress :value="0.5" aria-label="50 percent progress" />
<x-mbc::typography variant="caption" style="display: block; margin-top: 8px;">50%</x-mbc::typography>
</div>
<div style="text-align: center;">
<x-mbc::circular-progress :value="0.75" aria-label="75 percent progress" />
<x-mbc::typography variant="caption" style="display: block; margin-top: 8px;">75%</x-mbc::typography>
</div>
<div style="text-align: center;">
<x-mbc::circular-progress :value="1.0" aria-label="100 percent progress" />
<x-mbc::typography variant="caption" style="display: block; margin-top: 8px;">100%</x-mbc::typography>
</div>
</div>Tip: Circular progress indicators work well in buttons, cards, or anywhere space is limited. They provide visual feedback without taking up much room.
Determinate Progress
Determinate indicators show how long an operation will take. Use them when the progress percentage is known. Set the value prop to a number between 0 and 1.
File Upload Progress
65% uploaded (13 MB of 20 MB)
Processing Task
Step 1 of 3
33%
<div style="display: flex; flex-direction: column; gap: 2rem; width: 100%;">
<div>
<x-mbc::typography variant="subtitle2" gutterBottom>File Upload Progress</x-mbc::typography>
<x-mbc::linear-progress :value="0.65" aria-label="Upload 65 percent complete" />
<x-mbc::typography variant="caption" style="color: #666; margin-top: 4px;">65% uploaded (13 MB of 20 MB)</x-mbc::typography>
</div>
<div style="display: flex; gap: 2rem; align-items: center;">
<div style="flex: 1;">
<x-mbc::typography variant="subtitle2" gutterBottom>Processing Task</x-mbc::typography>
<x-mbc::linear-progress :value="0.33" aria-label="Task 33 percent complete" />
<x-mbc::typography variant="caption" style="color: #666; margin-top: 4px;">Step 1 of 3</x-mbc::typography>
</div>
<div style="text-align: center;">
<x-mbc::circular-progress :value="0.33" aria-label="Processing 33 percent" />
<x-mbc::typography variant="caption" style="display: block; margin-top: 8px;">33%</x-mbc::typography>
</div>
</div>
</div>Use Case: File uploads, form submissions, multi-step processes, downloads, data processing with known duration.
Indeterminate Progress
Indeterminate indicators visualize an unspecified wait time. Use them when the progress percentage is unknown. Simply omit the value prop or set it to null.
Loading Application
Please wait...
Loading...
Processing...
Syncing...
<div style="display: flex; flex-direction: column; gap: 2rem; width: 100%;">
<div>
<x-mbc::typography variant="subtitle2" gutterBottom>Loading Application</x-mbc::typography>
<x-mbc::linear-progress aria-label="Loading application" />
<x-mbc::typography variant="caption" style="color: #666; margin-top: 4px;">Please wait...</x-mbc::typography>
</div>
<div style="display: flex; gap: 3rem; align-items: center; justify-content: center;">
<div style="text-align: center;">
<x-mbc::circular-progress aria-label="Loading data" />
<x-mbc::typography variant="caption" style="display: block; margin-top: 8px;">Loading...</x-mbc::typography>
</div>
<div style="text-align: center;">
<x-mbc::circular-progress aria-label="Processing request" />
<x-mbc::typography variant="caption" style="display: block; margin-top: 8px;">Processing...</x-mbc::typography>
</div>
<div style="text-align: center;">
<x-mbc::circular-progress aria-label="Syncing data" />
<x-mbc::typography variant="caption" style="display: block; margin-top: 8px;">Syncing...</x-mbc::typography>
</div>
</div>
</div>Use Case: Initial page loads, API requests with unknown duration, background sync, searching, waiting for server response.
Progress with Buffer
Linear progress can display a buffer indicator showing the amount of content loaded ahead. Use the bufferValue prop in addition to value for buffering scenarios.
Video Buffering
Playing: 40% | Buffered: 70%
Audio Streaming
Playback: 25% | Buffer: 85%
Data Loading
Loaded: 60% | Prefetched: 90%
<div style="display: flex; flex-direction: column; gap: 2rem; width: 100%;">
<div>
<x-mbc::typography variant="subtitle2" gutterBottom>Video Buffering</x-mbc::typography>
<x-mbc::linear-progress :value="0.4" :bufferValue="0.7" aria-label="Video playing at 40%, buffered to 70%" />
<x-mbc::typography variant="caption" style="color: #666; margin-top: 4px;">Playing: 40% | Buffered: 70%</x-mbc::typography>
</div>
<div>
<x-mbc::typography variant="subtitle2" gutterBottom>Audio Streaming</x-mbc::typography>
<x-mbc::linear-progress :value="0.25" :bufferValue="0.85" aria-label="Audio at 25%, buffered to 85%" />
<x-mbc::typography variant="caption" style="color: #666; margin-top: 4px;">Playback: 25% | Buffer: 85%</x-mbc::typography>
</div>
<div>
<x-mbc::typography variant="subtitle2" gutterBottom>Data Loading</x-mbc::typography>
<x-mbc::linear-progress :value="0.6" :bufferValue="0.9" aria-label="Data loaded 60%, buffered 90%" />
<x-mbc::typography variant="caption" style="color: #666; margin-top: 4px;">Loaded: 60% | Prefetched: 90%</x-mbc::typography>
</div>
</div>Use Case: Video/audio players, streaming applications, progressive loading, content prefetching.
Progress Sizes
Circular progress supports multiple sizes: default (48px), medium (36px), small (24px), or custom sizes. Use the size prop to control the dimensions.
Small (24px)
Medium (36px)
Default (48px)
Custom (64px)
<div style="display: flex; gap: 3rem; align-items: center; justify-content: center; flex-wrap: wrap;">
<div style="text-align: center;">
<x-mbc::circular-progress size="small" :value="0.75" aria-label="Small progress indicator" />
<x-mbc::typography variant="caption" style="display: block; margin-top: 8px;">Small (24px)</x-mbc::typography>
</div>
<div style="text-align: center;">
<x-mbc::circular-progress size="medium" :value="0.75" aria-label="Medium progress indicator" />
<x-mbc::typography variant="caption" style="display: block; margin-top: 8px;">Medium (36px)</x-mbc::typography>
</div>
<div style="text-align: center;">
<x-mbc::circular-progress :value="0.75" aria-label="Default progress indicator" />
<x-mbc::typography variant="caption" style="display: block; margin-top: 8px;">Default (48px)</x-mbc::typography>
</div>
<div style="text-align: center;">
<x-mbc::circular-progress size="64px" :value="0.75" aria-label="Large progress indicator" />
<x-mbc::typography variant="caption" style="display: block; margin-top: 8px;">Custom (64px)</x-mbc::typography>
</div>
</div>Tip: Choose the size based on context. Use small for inline indicators, medium for cards or lists, and default/large for prominent loading states.
Progress Colors
Customize progress indicator colors using the color prop. You can use theme colors (primary, secondary) or any custom color value.
Primary (Default)
Secondary
Success (Custom Green)
Warning (Custom Orange)
Primary
Success
Error
<div style="display: flex; flex-direction: column; gap: 2rem; width: 100%;">
<div>
<x-mbc::typography variant="body2" gutterBottom>Primary (Default)</x-mbc::typography>
<x-mbc::linear-progress color="primary" :value="0.6" aria-label="Primary colored progress" />
</div>
<div>
<x-mbc::typography variant="body2" gutterBottom>Secondary</x-mbc::typography>
<x-mbc::linear-progress color="secondary" :value="0.6" aria-label="Secondary colored progress" />
</div>
<div>
<x-mbc::typography variant="body2" gutterBottom>Success (Custom Green)</x-mbc::typography>
<x-mbc::linear-progress color="#4CAF50" :value="0.6" aria-label="Success progress" />
</div>
<div>
<x-mbc::typography variant="body2" gutterBottom>Warning (Custom Orange)</x-mbc::typography>
<x-mbc::linear-progress color="#FF9800" :value="0.6" aria-label="Warning progress" />
</div>
<div style="display: flex; gap: 2rem; justify-content: center; margin-top: 1rem;">
<div style="text-align: center;">
<x-mbc::circular-progress color="primary" :value="0.6" aria-label="Primary circular" />
<x-mbc::typography variant="caption" style="display: block; margin-top: 8px;">Primary</x-mbc::typography>
</div>
<div style="text-align: center;">
<x-mbc::circular-progress color="#4CAF50" :value="0.6" aria-label="Success circular" />
<x-mbc::typography variant="caption" style="display: block; margin-top: 8px;">Success</x-mbc::typography>
</div>
<div style="text-align: center;">
<x-mbc::circular-progress color="#F44336" :value="0.6" aria-label="Error circular" />
<x-mbc::typography variant="caption" style="display: block; margin-top: 8px;">Error</x-mbc::typography>
</div>
</div>
</div>Best Practice: Use colors purposefully to convey meaning. Green for success/completion, orange for warnings, red for errors, and theme colors for general loading states.
Properties
mbc::linear-progress
| Name | Type | Default | Description |
|---|---|---|---|
aria-label
|
string
|
required
|
Accessible label for screen readers (required) |
bufferValue
|
float|null
|
null
|
Buffer value for buffering indicator (0-1) |
color
|
string
|
primary
|
Progress bar color (primary, secondary, or any color) |
value
|
float|null
|
null
|
Progress value between 0 and 1. If null, shows indeterminate state |
mbc::circular-progress
| Name | Type | Default | Description |
|---|---|---|---|
aria-label
|
string
|
required
|
Accessible label for screen readers (required) |
color
|
string
|
primary
|
Progress indicator color (primary, secondary, or any color) |
size
|
string
|
48px
|
Size of the circular progress (48px, medium/36px, small/24px, or custom) |
value
|
float|null
|
null
|
Progress value between 0 and 1. If null, shows indeterminate state |