Elements

Progress

A progress bar shows how far a task with a known extent is (a download, an upload, a step of a setup), or, while indeterminate, that a task of unknown extent is under way. It owns what screen readers get, the progress bar role with the range 0 to 100 and the value, and the indicator’s width: value percent of the track’s. The look is the app’s: a Progress has no colors, sizes, radii, motion or label of its own. It is made of a track with an indicator inside it, then its children (a label, the value as text), and the app styles each part.

el-progress.tsx

el-progress.tsxLive

import { cleanup, mount, signal, Text, View } from "nsh";
import { reduceMotion } from "nsh/accessibility";
import { Button, Progress, Switch } from "nsh/base";
import { desktop, focusRing, hoverFill, Log, Panel, size, Split, ui } from "./palette";

// The parts: geometry and motion in classes, colors from the palette. The
// label row comes first (`flex-col-reverse`: the children follow the track),
// its value tabular and at the trailing edge. An indeterminate indicator is a
// third of the track that sweeps from end to end (the app flips its
// translation, a transition moves it), and rests in the middle with reduced
// motion; the pointer's hover and the keyboard's focus ring come from the
// palette. Buttons are as wide as their labels with a pointer.
const pad = desktop ? "px-3 py-3" : "px-4 py-4";
const track = "h-1.5 overflow-hidden rounded-full";
const SWEEP = 800;
const indicator = (indeterminate: boolean, end: boolean) =>
  !indeterminate
    ? "h-full rounded-full"
    : reduceMotion()
      ? "h-full w-1/3 rounded-full translate-x-full"
      : `h-full w-1/3 rounded-full transition-transform duration-700 ease-in-out ${end ? "translate-x-[200%]" : "translate-x-0"}`;

function Transfer(props: { label: string; detail: string; value: number; indeterminate?: boolean; end: boolean }) {
  return (
    <Progress
      value={props.value}
      indeterminate={props.indeterminate}
      class={`flex-col-reverse gap-2 ${pad}`}
      trackClass={track}
      trackStyle={ui().inset}
      indicatorClass={indicator(!!props.indeterminate, props.end)}
      indicatorStyle={{ backgroundColor: ui().accent }}
    >
      <View class="flex-row items-baseline gap-3">
        <View style={{ flex: 1, gap: 2 }}>
          <Text style={{ fontSize: size.label, fontWeight: "500", color: ui().text }}>{props.label}</Text>
          <Text style={{ fontSize: size.detail, color: ui().muted }}>{props.detail}</Text>
        </View>
        <Text style={{ fontSize: size.label, color: ui().muted, fontVariant: ["tabular-nums"], textAlign: "right" }}>
          {props.indeterminate ? "—" : `${Math.round(props.value)}%`}
        </Text>
      </View>
    </Progress>
  );
}

function Action(props: { label: string; disabled?: boolean; onPress: () => void }) {
  return (
    <Button
      onPress={props.onPress}
      disabled={props.disabled}
      class="items-center justify-center rounded-lg border px-3 active:opacity-70 disabled:opacity-40"
      style={{ height: size.control, flex: desktop ? undefined : 1, borderColor: ui().border }}
      hoverStyle={props.disabled ? undefined : hoverFill()}
      focusStyle={focusRing()}
    >
      <Text style={{ fontSize: desktop ? 13 : 15, fontWeight: "600", color: ui().text }}>{props.label}</Text>
    </Button>
  );
}

function App() {
  const sent = signal(35);
  const running = signal(false);
  const unknown = signal(false);
  const events = signal<string[]>([]);
  const log = (line: string) => events.set([line, ...events()].slice(0, 5));
  // The sweep of the indeterminate bars: still with reduced motion.
  const end = signal(false);
  const sweep = setInterval(() => {
    if (!reduceMotion()) end.set(!end());
  }, SWEEP);
  cleanup(() => clearInterval(sweep));
  let timer: ReturnType<typeof setInterval> | undefined;
  const stop = () => {
    if (timer !== undefined) clearInterval(timer);
    timer = undefined;
    running.set(false);
  };
  const start = () => {
    if (sent() >= 100) sent.set(0);
    running.set(true);
    log(`Start at ${sent()}%`);
    timer = setInterval(() => {
      sent.set(Math.min(100, sent() + 5));
      if (sent() >= 100) {
        stop();
        log("Done: value 100");
      }
    }, 200);
  };
  const line = () => <View style={{ height: 1, marginLeft: desktop ? 12 : 16, backgroundColor: ui().line }} />;
  return (
    <View style={{ flex: 1, backgroundColor: ui().page, padding: 20, paddingTop: 24, gap: 14 }}>
      <Text style={{ fontSize: 22, fontWeight: "700", color: ui().text }}>progress</Text>
      <Text style={{ color: ui().muted }}>{desktop ? "Click Start, or Tab to it and press Space" : "Tap Start to send the photos"}</Text>

      <Split
        gap={14}
        inspector={
          <>
            <Panel title="value · indeterminate">
              <Text style={{ fontSize: 13, color: ui().text, fontVariant: ["tabular-nums"] }}>
                {unknown() ? "indeterminate (no value for screen readers)" : `value ${sent()} of 100`}
              </Text>
              <View class={desktop ? "flex-row self-start gap-2" : "flex-row gap-2"}>
                <Action label={running() ? "Pause" : sent() >= 100 ? "Again" : "Start"} disabled={unknown()} onPress={() => (running() ? (stop(), log(`Pause at ${sent()}%`)) : start())} />
                <Action
                  label="Reset"
                  disabled={sent() === 0}
                  onPress={() => {
                    stop();
                    sent.set(0);
                    log("Reset: value 0");
                  }}
                />
              </View>
              <Switch
                checked={unknown()}
                onChange={(next) => {
                  unknown.set(next);
                  if (next) stop();
                  log(next ? "Size unknown: indeterminate" : "Size known: value " + sent());
                }}
                class={`-mx-2 flex-row-reverse items-center justify-between gap-3 rounded-lg px-2 ${desktop ? "py-1" : "py-2"} active:opacity-70`}
                hoverStyle={hoverFill()}
                focusStyle={focusRing()}
                trackClass={`${desktop ? "w-9" : "w-12"} rounded-full p-0.5 transition-colors motion-reduce:transition-none`}
                trackStyle={unknown() ? ui().accentFill : ui().inset}
                thumbClass={desktop ? "size-4 rounded-full transition-transform motion-reduce:transition-none checked:translate-x-4" : "size-5.5 rounded-full transition-transform motion-reduce:transition-none checked:translate-x-5"}
                thumbStyle={unknown() ? { backgroundColor: ui().onAccent } : ui().raised}
              >
                <Text style={{ flex: 1, fontSize: size.label, color: ui().text }}>Size unknown</Text>
              </Switch>
            </Panel>
            <Log title="events" lines={events()} minHeight={92} />
          </>
        }
      >
        <View style={{ ...ui().card, borderRadius: 16, overflow: "hidden" }}>
          <Transfer
            label="Sending 24 photos"
            detail={unknown() ? "Counting what to send" : sent() >= 100 ? "Sent" : `${Math.round((sent() / 100) * 24)} of 24`}
            value={sent()}
            indeterminate={unknown()}
            end={end()}
          />
          {line()}
          <Transfer label="Preparing the backup" detail="Its size is not known yet" value={0} indeterminate end={end()} />
          {line()}
          <Transfer label="Library" detail="212 GB of 256 GB" value={83} end={end()} />
        </View>
      </Split>
    </View>
  );
}

mount(App);

use nsh_base::{progress, theme};
use nsh_core::ui::prelude::*;

fn upload(sent: Signal<f32>) -> impl IntoElement {
    progress()
        .value(sent)
        .accessibility_label("Uploading photos")
        .gap_2()
        .track_style(|s| s.h(px(8.0)).rounded_full().overflow_hidden().bg(move || theme().muted))
        .indicator_style(|s| s.h_full().rounded_full().bg(move || theme().primary))
        .child(
            text(move || format!("{:.0}%", sent.get()))
                .text_sm()
                .text_color(move || theme().muted_foreground),
        )
}

import { mount, signal, Text } from "nsh";
import { Progress } from "nsh/base";

function App() {
  const sent = signal(40);
  return (
    <Progress
      value={sent()}
      accessibilityLabel="Uploading photos"
      class="gap-2"
      trackClass="h-2 overflow-hidden rounded-full bg-muted"
      indicatorClass="h-full rounded-full bg-primary"
    >
      <Text class="text-sm text-muted-foreground">{`${sent()}%`}</Text>
    </Progress>
  );
}

mount(App);

Progress comes from nsh/base, the nsh-base crate in Rust. The value is the app’s: the progress bar shows the value the app passes, held to 0 to 100. In Rust, progress() makes one with a setter per prop (.value(..), .indicator_style(..)), the typed style methods for the progress bar itself and .child(..) for its label.

#Props

Prop	Rust	Type	Default	Description
`value`	`.value(..)`	`number`	`0`	How far the task is, as a percentage from 0 to 100 (outside the range, the nearest end). The indicator is that share of the track’s width, and screen readers say it.
`indeterminate`	`.indeterminate(..)`	`boolean`	`false`	The task’s extent is unknown: screen readers hear a progress bar with no value, and the indicator’s width is the app’s (`indicatorClass`).
`accessibilityLabel`	`.accessibility_label(..)`	`string`	none	What screen readers say: what is in progress, when its children have no text that says it.
`trackClass`, `trackStyle`	`.track_style(\|s\| ..)`	`string`, `StyleProp<ViewStyle>`	none	The track, the part the indicator fills.
`indicatorClass`, `indicatorStyle`	`.indicator_style(\|s\| ..)`	`string`, `StyleProp<ViewStyle>`	none	The indicator, inside the track: its height, color and motion.
`children`	`.child(..)`	`JSX.Element`	none	The content after the track: a label or the value as text, which screen readers say.
`class`, `style`	style methods	`string`, `StyleProp<ViewStyle>`	none	The progress bar itself: the column (or row) around the track and the label.

#Parts

Part	Inside	Styled with
The progress bar		`class`, `style`
The track	the progress bar, first	`trackClass`, `trackStyle`
The indicator	the track	`indicatorClass`, `indicatorStyle`; its width is `value` percent of the track’s
The label	the progress bar, after the track	its own elements (`children`)

The indicator starts at the track’s leading edge; overflow-hidden and a radius on the track round its end with the track’s. A w-* class or a width in indicatorStyle takes the place of the value’s width, which is how an indeterminate bar gets its own.

#Indeterminate

While the extent is unknown, set indeterminate and give the indicator a width and motion of the app’s. Motion is the app’s choice, and motion-reduce: keeps it still for people who ask for less motion:

<Progress
  value={0}
  indeterminate={connecting()}
  trackClass="h-2 overflow-hidden rounded-full bg-muted"
  indicatorClass={
    connecting()
      ? "h-full w-1/3 rounded-full bg-primary animate-pulse motion-reduce:animate-none"
      : "h-full rounded-full bg-primary"
  }
/>

#Accessibility

A progress bar is one element for screen readers, with the role "progressbar", the range 0 to 100 and its value (VoiceOver and TalkBack say it as a percentage); the track and the indicator are parts of it. Its label is the text of its children; give accessibilityLabel when it has none.
While indeterminate, it keeps the role and the range and has no value (in the browser: aria-valuenow is left out, as ARIA says an indeterminate progress bar is).
It takes no presses and no keyboard focus: it reports, and the controls that start or stop the task are the app’s.

See Accessibility for labels, roles and announcements in general.

#Platform notes

Every platform draws what the app styles; the indicator’s width follows value at once, and a change animates when the app animates it.
Screen readers: VoiceOver (iOS, macOS) hears the value as a percentage and the bar as updating frequently; TalkBack, UI Automation (Windows), GTK’s accessibility (Linux) and the browser (aria-valuenow) get the range and the value.