Type keyword

Progress bar

A progress bar is a visual representation that communicates the advancement and status of a specific, measurable action or process. It serves as a valuable tool in user interfaces to provide users with real-time feedback on the completion or progress of a task. Progress bars are particularly useful when users are engaged in actions such as file uploads, software installations, form submissions, or any process that unfolds in a step-by-step or incremental manner. This visual indicator helps manage user expectations, provides assurance that their request is being processed, and allows users to track the ongoing progress, contributing to a more transparent and user-centric experience.

Variant

Here are some types of progress bar, including:

Anatomy

  1. Track bar
  2. Progress Indicator

Usage

The Progress Bar component is a fundamental and highly visual element in design systems that serves to communicate the completion or progress of a task, process, or operation to users. This component is commonly used to convey the status of loading, file uploads, form submissions, software installations, or any process that unfolds incrementally, allowing users to track and understand the progression.

Key Characteristics and Usage:

  1. Progress Visualization: Progress Bars provide a visual representation of the advancement of a task or process. They offer a clear and real-time indication of how far along a user is in completing a specific action.
  2. User Feedback: These components are vital for user feedback, assuring users that their request is being processed and helping to manage expectations regarding how long a task will take to complete.
  3. Customizability: Progress Bars are usually designed to fit a design system’s visual language but also allow for customization to adapt to different themes, branding, or contextual color schemes.
  4. Responsiveness: They should be designed to be responsive, adapting to different screen sizes and orientations, ensuring an optimal user experience on both desktop and mobile devices.
  5. Accessibility: Accessibility considerations should be taken into account to ensure that Progress Bars are usable and understandable by individuals with disabilities. This includes implementing appropriate ARIA attributes for screen readers.

The use of a basic progress bar is to provide brief information about the steps that have been completed. It's typically used for long progress sequences, usually more than 4 steps.

Use the basic rounded step style for cases with fewer steps, eliminating the need for additional text labels.

import { Progress } from '@efishery/onefish'

const function App = () => {
  return (
    <Progress value={80} />
  )
}