Skip the navigation

Progress Bar

A progress bar visually represents the completion status of a task or process, providing users with real-time feedback on their progress.


Usage

import { ProgressBar } from "@caesars-ui/core"

A progress bar component visually represents the completion status of a task or process, providing users with real-time feedback on their progress. This horizontal bar fills up from left to right, often accompanied by percentage indicators or descriptive text to enhance clarity.

It can also be used to display the time required for tasks such as file uploads, form submissions, or software installations.

In a betting context, it can show a bet's live progress during a game, highlighting key thresholds that need to be met for a bettor to win or lose. This feature adds real-time engagement, making it an essential tool for setting clear expectations and keeping users informed throughout the event.

Properties

* indicates required.

Accessibility

Principle

Status

Description

Percievable
Ready
The progress bar uses high contrast colors to ensure visibility.
Operable
Ready
Users can interact with the Progress Bar using a variety of input methods, including keyboard and mouse. The ProgressBar also has a consistent behavior across the site, so that users can anticipate what will happen when they click on it.
Understandable
Ready
Uses clear, concise labels and descriptions for the progress bar when necessary.
Robust
Ready
Uses standard HTML, ARIA roles, and properties for progress bars.