Components / Progress

Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

60%

razor

<NaviusProgress Value="_value" Max="100"
                class="relative h-3 w-full overflow-hidden rounded-full bg-muted">
    <NaviusProgressIndicator
        class="h-full w-full bg-primary transition-transform"
        style="@($"transform: translateX(-{100 - _value}%);")" />
</NaviusProgress>

@code { private double _value = 60; }

Features

Provides context for assistive technology to read the progress of a task.
Supports an indeterminate state when Value is null.
Validates rather than clamps: a value below 0 or above Max is treated as indeterminate.
Exposes data-complete, data-indeterminate, data-progressing, data-value and data-max for styling.

Installation

Reference the Navius.Primitives package for the headless primitive, or vendor a styled version with the CLI: navius add copies the styled zits/ui component plus the brain files it depends on.

Terminal bash

navius add progress

Anatomy

Import the parts and assemble them.

razor

@using Navius.Primitives.Components.Progress

<NaviusProgress>
    <NaviusProgressIndicator />
</NaviusProgress>

API Reference

Root

Contains all of the progress parts. Renders a div with role="progressbar".

Prop	Type	Default
Value	double?	null
Max	double	100
GetValueLabel	Func<double?, double, string?>?	-
ChildContent	RenderFragment?	-

Data attributes

Data attribute	Values
[data-complete]	Present when the value equals the max
[data-indeterminate]	Present when the value is null
[data-progressing]	Present while determinate and in progress
[data-value]	The current value (absent when indeterminate)
[data-max]	The max value

Indicator

Used to visually show the progress. Renders a div.

Prop	Type	Default
ChildContent	RenderFragment?	-

Data attributes

Data attribute	Values
[data-complete]	Present when the value equals the max
[data-indeterminate]	Present when the value is null
[data-progressing]	Present while determinate and in progress
[data-value]	The current value (absent when indeterminate)
[data-max]	The max value

Accessibility

Implements the progressbar role requirements. The root sets aria-valuemin, aria-valuemax, aria-valuenow and aria-valuetext from the resolved value, and omits aria-valuenow while indeterminate. This is covered by the browser test suite and an axe-core WCAG gate in CI.

A progress bar is not interactive, so it has no keyboard interactions.