Progress

Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

Basic

A simple progress bar.

Progress Values

Progress bars at different completion levels.

0%Not started
25%Getting started
50%Halfway there
75%Almost done
100%Complete

Interactive

Control the progress value dynamically.

60%

Usage Examples

Common use cases for progress indicators.

File Upload

document.pdf 2.4 MB / 4.0 MB

Profile Completion

Complete your profile 3 of 5 steps

Loading Content

Loading...

Accessibility

The Progress component uses ARIA attributes including role="progressbar", aria-valuemin, aria-valuemax, and aria-valuenow for screen reader support.

API Reference

Component parameters and their types.

Prop Type Default Description
Value double? Current progress value between 0 and Max.
Max double 100 Maximum value of the progress bar.
Class string? Additional CSS classes appended to the root element.

Reconnecting...

Attempting to rejoin the server

Connection Lost

Retrying in seconds

Connection Failed

Failed to rejoin the server.
Please retry or reload the page.

Session Paused

The session has been paused by the server

Resume Failed

Failed to resume the session.
Please reload the page.