Progress Element
The Progress element displays visual indicators for task completion, performance statistics, or linear data through customizable bars.
Live Preview
Progress Preview
Specifications
Progress bars can be styled and configured to showcase various data points:
- Value Mapping: Set current Value and Max properties to precisely define the fill percentage.
- Sizing: Choose between Small, Medium, and Large heights for different layout contexts.
- Coloring: Independently set the Track Color (background) and Indicator Color (fill) using any hex or theme color.
- Value Label: Optionally enable Show Value to display the numeric percentage alongside the bar.
- Entrance Effects: Animate the fill transition using standard entrance animations.
AI Guidance
How to prompt for Progress:
- Add a progress bar at 75% with a blue indicator color.
- Create a thick green progress bar that shows the percentage value.
- Insert a small, subtle progress bar for showing project status.