Progress bar

Visual indicators that show the completion status of a task or process.

Variants

<div class="Progress">
  <div class="Progress-bar" style="width: 50%;"></div>
</div>

Indeterminate Progress Bar: Represents an ongoing process with no defined end.

<div class="Progress Progress--indeterminate">
  <div class="Progress-bar"></div>
</div>

For indeterminate states, use aria-valuetext="Loading" to indicate ongoing activity.

Use subtle animations for indeterminate progress bars to indicate motion.
Ensure color contrasts are high enough for accessibility.
Align labels consistently with the progress bar, either inside or adjacent to it.
for more info visit - Primer Progress bar