> For the complete documentation index, see [llms.txt](https://voit.gitbook.io/voitdocs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://voit.gitbook.io/voitdocs/components/progress-indicator.md).
# Progress Indicator
Progress indicators show the steps or stages in a process, helping users understand where they are and what steps remain. They provide visual feedback on the progress of multi-step tasks or workflows.
## Overview
Progress indicators help users navigate through staged processes, such as checkouts or onboarding flows, by clearly displaying each step and the overall progress.
{% embed url="" %}
## When to use
* Use in onboarding flows to show users how far they’ve come in setting up their profile or completing necessary tasks.
* When users need to move through several stages, like shipping, payment, and confirmation, progress indicators provide clarity and keep users informed.
* For software or application installation processes that involve multiple steps, progress indicators help users understand how far they are from completing the setup.
* When users engage in workflows with multiple interdependent stages (e.g., setting up a project), progress indicators offer a structured view of the task's entirety.
## When not to use
* For simple actions that complete in one step (e.g., submitting a form), a progress indicator would be unnecessary and clutter the interface.
* If the number of steps required can change dynamically or is unclear, progress indicators may mislead users and cause frustration.
* Avoid using progress indicators for processes that don't follow a strict sequential order, as they may confuse users by implying an expected progression.
* When a process is running in the background or doesn't require direct user interaction, progress indicators are likely not the right tool.
## Types
## Anatomy
1. **Connector Line:** A visual link between steps showing their relationship, represented as a line.
2. **Progress Status:** This element shows the current status of each step, which could be a number, icon, checkmark, or empty state for uncompleted steps.
3. **Label:** Descriptive text for each step, helping users understand the nature of each stage.
4. **Description:** Optional text providing more context about each step, useful for complex processes.
## Styles
## States
## Layout
## Icon Placement
## Size
| Size | Text (px) | Icon (px) | Container Height (px) |
| ------- | --------- | --------- | --------------------- |
| Default | 16 | 24 | 40 |
## Accessibility
* **Keyboard Navigation:** Ensure that all steps in the progress indicator can be navigated using a keyboard, particularly for users who cannot rely on a mouse for interaction.
* **Clear Labels for Each Step:** Each step in the progress indicator should be clearly labeled for screen readers, helping visually impaired users understand where they are in the process.
* **High Contrast and Visibility:** Use contrasting colors to differentiate between completed, current, and upcoming steps. Ensure all steps are easily distinguishable for users with color blindness.
* **Announcing Step Transitions:** Provide appropriate feedback when users transition between steps, including status updates for assistive technology like screen readers.
* **Consistency Across Devices:** Progress indicators should behave consistently across mobile, tablet, and desktop platforms, maintaining clear step labeling and interaction.
## Example
* **Multi-Step Checkout:** Use progress indicators to display the stages of a checkout process, from cart review to payment and confirmation.
* **Survey Completion:** Display the steps in a survey or questionnaire, helping users understand how many questions they have left to answer.
* **Account Setup:** During user account setup, progress indicators guide users through tasks like adding profile information and preferences.
* **Project Management Tools:** In project tools, progress indicators help users track the completion of various phases or tasks in a multi-stage project setup.
* **Software Installation:** When installing software, progress indicators show each step in the installation process, such as system checks, downloads, and configuration.
