Components

Progress

Work in progress with a known amount left: a track and the bar filling it, announced as a progressbar with its value and maximum, and moving to a new value rather than jumping.

Drawn and behaving as Flux UI's progress does, measured against its live docs.

Progress

Name it for a screen reader with Aria("label", …), or Aria("labelledby", id).

ProgressExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class ProgressExample : Component
{
    protected override Component? Render() =>
        Div.Class("max-w-64")[
            Ui.Progress.Value(75).Aria("label", "Sync")
        ];
}

Live result

Max

A scale other than a hundred: three steps of seven.

ProgressMaxExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class ProgressMaxExample : Component
{
    protected override Component? Render() =>
        Div.Class("max-w-64")[
            Ui.Progress.Value(3).Max(7).Aria("label", "Steps done")
        ];
}

Live result

Color

Any Tailwind hue in place of the accent.

ProgressColorExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class ProgressColorExample : Component
{
    protected override Component? Render() =>
        Div.Class("max-w-64")[
            Ui.Progress.Value(75).Color(Ui.Color.Purple).Aria("label", "Quota")
        ];
}

Live result

Height

A class makes it taller.

ProgressHeightExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class ProgressHeightExample : Component
{
    protected override Component? Render() =>
        Div.Class("max-w-64")[
            Ui.Progress.Value(75).Class("h-3").Aria("label", "Battery")
        ];
}

Live result

With label

A label above it names it, and a line below says what is happening.

ProgressLabelExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class ProgressLabelExample : Component
{
    protected override Component? Render() =>
        Div.Class("max-w-64")[
            Div.Id("progress-upload").Class("mb-3 text-sm font-medium")["Upload progress"],
            Ui.Progress.Value(42).Color(Ui.Color.Blue).Aria("labelledby", "progress-upload"),
            Ui.Text.Sm.Class("mt-3")["Uploading 3 of 7 files..."]
        ];
}

Live result

Upload progress

Uploading 3 of 7 files...

Controlled

The value is the page's field, shown beside the label; the bar moves to each new one.

ProgressControlledExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class ProgressControlledExample : Component
{
    private int _progress = 62;

    protected override Component? Render() =>
        Div.Class("max-w-64 space-y-6")[
            Div[
                Div.Id("progress-storage").Class("mb-3 flex text-sm font-medium")[
                    "Storage",
                    Span.Class("ms-auto tabular-nums")[$"{_progress}%"]
                ],
                Ui.Progress.Data("testid", "ui-progress-storage").Value(_progress).Aria("labelledby", "progress-storage")
            ],
            Div.Class("flex gap-2")[
                Ui.Button.Key("less").Sm.OnClick(() => { _progress = Math.Max(0, _progress - 10); })["−10"],
                Ui.Button.Key("more").Sm.OnClick(() => { _progress = Math.Min(100, _progress + 10); })["+10"]
            ]
        ];
}

Live result

Storage62%

Behaviour

What it announces

It IS the <div role="progressbar">, with aria-valuemin 0, and aria-valuenow and aria-valuemax the value and maximum exactly as given.

It is a UiElement, so the name a screen reader needs is .Aria("label", "Upload") or .Aria("labelledby", id). A name written at the call site wins, as everywhere in the kit.

The bar

The bar is Value over Max, held between empty and full, and moves to a new value over 300ms.

The same share is on the element as --ui-progress (a number, 0–100) and --ui-progress-percentage, for a label or a ring drawn from the same figure.

Size and colour

A 6px track the width of its container, written at zero specificity so .Class("h-3") makes it taller. Unset, the bar is the accent; a Color is the 600 of its hue, and its 400 on a dark surface, as measured on Flux.

There is no radial progress: Flux has none, and Ui.RadialProgress is gone.

Reference

`Ui.Progress`

flux:progress

A <div role="progressbar">: a 6px track the width of its container and the bar filling it.

Step	Takes	What it does
`.Value(…)`	`Double`	How far along it is, from 0 to Max. 0 when unset.
`.Max(…)`	`Double`	What Value is out of. 100 when unset.
`.Color(…)`	Ui.Color: one of Tailwind's hues, each a step too (.Blue)	The bar's colour. The accent when unset.

It is one HTML element, so Id, Class, Style, Data, Aria and the events are its steps too.