navius

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

Install the brain, or copy just this primitive in with the CLI.

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

Adheres to 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.

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