A visual indication that progress is occurring.

Determinate progress bar displays progress towards a specific goal. It uses a visual indicator with a defined start and end point.

• Integrate: Use in scenarios where progress can be quantified.
• Update: Dynamically adjust as progress is made.
• Display: Show percentage or fraction of completion.

• Quantifiable Progress: Tasks with measurable milestones.
• Feedback: Provide users with real-time updates on task completion.
• Duration: Best for tasks between 3 seconds and 15 minutes.

• Indeterminate Tasks: Avoid for tasks without a clear end point.
• Minimal Progress: Not suitable for tasks with negligible progress visibility.
• Short Tasks: Less than 3 seconds, as the bar fills too quickly.
• Long Tasks: More than 15 minutes, as progress becomes imperceptible.

• Track: Background bar indicating total scope.
• Indicator: Foreground bar showing current progress.
• Label: Optional text displaying percentage or fraction.

• Responsive: Adjust size and layout based on container dimensions.
• Animated: Smooth transitions as progress updates.

• Hover: Display additional information or tooltip.
• Click: Optional interaction to pause or resume progress.

• Aria Attributes: Use aria-valuenow, aria-valuemin, and aria-valuemax for screen readers.
• Contrast: Ensure sufficient contrast between track and indicator.
• Text Alternatives: Provide text descriptions for visual elements.

• Indeterminate Progress Bar: Use for tasks without a clear end point.
• Loading Spinner: Consider for short, non-quantifiable tasks.