🚧 Under Construction

This component documentation is currently being developed. Some features may be incomplete.

Progress Step Bar

HTML Markup

<div class="hoo-progress-stepbar">
    <progress class="hoo-progress-bar" value="70" max="100">70%</progress>
    <div class="hoo-progress-step"
        style=" --step-offset : 20%;">
        <div class="inner">
            <div class="hoo-progress-step-indicator">
            </div>
            <div class="hoo-progress-step-label">Step 1</div>
        </div>
    </div>
    <div class="hoo-progress-step"
        style=" --step-offset : 50%;">
        <div class="inner">
            <div class="hoo-progress-step-indicator">
            </div>
            <div class="hoo-progress-step-label">Step 2</div>
        </div>
    </div>
    <div class="hoo-progress-step"
        style=" --step-offset : 70%;">
        <div class="inner">
            <div class="hoo-progress-step-indicator">
            </div>
            <div class="hoo-progress-step-label">Step 3</div>
        </div>
    </div>
</div>

Overview

The Progress Step Bar component combines a standard progress bar with step indicators, creating a visual representation of progress through a multi-step process. This component is ideal for wizards, onboarding flows, and any multi-stage user journey.

Usage

Use the Progress Step Bar when you need to provide users with a clear visual representation of their progress through a multi-step process, where each step is distinctly labeled.

Example:

<div class="hoo-progress-stepbar">
    <progress class="hoo-progress-bar" value="50" max="100">
        50%
    </progress>
    <div class="hoo-progress-step" style="--step-offset: 0%;">
        <div class="inner">
            <div class="hoo-progress-step-indicator"></div>
            <div class="hoo-progress-step-label">Start</div>
        </div>
    </div>
    <div class="hoo-progress-step" style="--step-offset: 50%;">
        <div class="inner">
            <div class="hoo-progress-step-indicator"></div>
            <div class="hoo-progress-step-label">In Progress</div>
        </div>
    </div>
    <div class="hoo-progress-step" style="--step-offset: 100%;">
        <div class="inner">
            <div class="hoo-progress-step-indicator"></div>
            <div class="hoo-progress-step-label">Complete</div>
        </div>
    </div>
</div>

CSS Classes

.hoo-progress-stepbar: The main container that holds the progress bar and step indicators
.hoo-progress-bar: The actual progress bar element
.hoo-progress-step: Individual step indicators (see Progress Step component)

Customization

The Progress Step Bar can be customized by:

Setting the value and max attributes of the progress bar
Positioning steps using the --step-offset CSS variable
Adjusting the height of step indicators using the --indicator-offset CSS variable

SCSS Imports

Main Component
@n8d/htwoo-core/components/atoms/output/progress-bar

Accessibility

The progress bar should use the native <progress> element for proper screen reader support
Each step should have a descriptive label
Ensure sufficient color contrast between the progress bar, steps, and background
The current step should be clearly indicated both visually and to screen readers