Progress Bar

Use the progress bar component to visually represent the progress of a task or operation.

Variants

Progress Bar

  <div class="gi-progress-bar-container">
    <div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" aria-labelledby="progress-bar-:S1:" aria-label="Progress bar" class="gi-progress-bar gi-h-2">
      <div class="gi-h-2 gi-bg-gray-700" style="width: 50%;">
      </div>
    </div>
  </div>

  {{ govieProgressBar({"value": 50 }) }}

  import { ProgressBar } from '@govie-ds/react';

  <ProgressBar value={50} />

Indeterminate Progress Bar

<div class="gi-progress-bar-container">
  <div role="progressbar" aria-label="Progress bar" data-testid="progress-bar" class="gi-progress-bar gi-h-2">
    <div class="gi-h-2 gi-bg-gray-700 gi-progress-bar-indeterminate"></div>
  </div>
  <span>Loading...</span>
</div>

  {{ govieProgressBar({"label": "Loading...", "isIndeterminate": true }) }}

  import { ProgressBar } from '@govie-ds/react';

  <ProgressBar isIndeterminate label="Loading..." />

Usage

Best Practices

• Ensure progress bars are visually distinct and easy to interpret against their background for clarity.
• Place progress bars close to the task or content they represent to maintain contextual relevance.
• Provide additional textual feedback (e.g., percentage complete or estimated time) to improve user understanding, especially for long-duration tasks.

When to use this component

• Use a determinate progress bar when the progress of a task can be measured (e.g., file upload, form completion).
• Use an indeterminate progress bar when the duration of a task is unknown but progress should be indicated (e.g., loading state).

When not to use this component

• Avoid using a progress bar for static values that do not visually indicate progress.
• Do not use a progress bar if the task completion time is very short, as it might appear unresponsive to the user.

Accessibility

• Always include an appropriate label for screen readers to describe the task being performed.
• For determinate progress, ensure the current value and total value are conveyed to assistive technologies.

Status