The Progress component is used to display progress indicators for tasks such as data loading, file uploads, or long-running operations. It supports both determinate (specific value) and indeterminate (ongoing activity) modes.
1. Basic Properties
- Name → Unique identifier for the component (e.g.,
Progress1). - Default value → Sets the initial progress percentage (e.g.,
25).- Relevant only for determinate mode.
- Disable shrink → Prevents the animation from shrinking when in indeterminate mode.
2. Size and Thickness
- Size → Diameter of the progress circle (e.g.,
40). - Thickness → Width of the progress stroke (e.g.,
3.6).
3. Color
Defines the theme color of the progress indicator:
- primary
- secondary
- Or custom colors (via style).
4. Variant
Controls the progress mode:
- determinate → Shows a specific percentage of progress (
0–100). - indeterminate → Displays an ongoing loading animation without a set value.
5. Layout
- Breakpoints → Controls responsive sizing in grid layouts.
- Spacing → Adjusts margins and padding relative to other components.
📘 See Common Properties → Layout.
6. Style
Custom styling can be applied for:
- Animation speed
- Colors
- Alignment
- Shadows
📘 See Common Properties → Style.
7. Business Use Cases
- File uploads → Show percentage progress.
- Data synchronization → Indicate ongoing background processes.
- Form submission → Visual feedback while saving data.
- Dashboard widgets → Represent completion of tasks/goals.
✅ The Progress component provides a clear and visual way to communicate loading or progress states, ensuring users stay informed during long or uncertain operations.