import { WyrdProgressBar } from "@wyrd-company/react";
<WyrdProgressBar value={42} label="Upload progress" />import 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdProgressBar(
value: 42,
label: 'Upload progress',
) feedback — wyrd.component.progress-bar
Linear progress indicator; value is determinate from 0..100 and absent value means indeterminate.
Install @wyrd-company/react or the Flutter package and use it directly —
your DESIGN.md does the styling.
$schema: https://thewyrdingway.dev/schemas/component-contract.schema.ymlcontractVersion: 0.1.0identity: name: ProgressBar tag: wyrd-progress-bar package: wyrd.component.progress-bar title: Progress Bar summary: Linear progress indicator; value is determinate from 0..100 and absent value means indeterminate.relationships: related-to: - quality-parity-and-gatesclassification: category: feedback composition: leaf interactive: falsetarget-strategy: react: required flutter: requiredsurface: properties: - name: value type: kind: number required: false serializable: true summary: Determinate progress value in the normative 0..100 range; implementations clamp out-of-range values. - name: label type: kind: string required: false serializable: true summary: Optional accessible name for the progressbar. slots: [] events: [] states: - name: determinate source: property summary: Value is present and clamped into the 0..100 range. - name: indeterminate source: property summary: Value is absent. parts: - name: root summary: Progressbar root. - name: track summary: Track surface. - name: fill summary: Determinate fill or indeterminate animated fill. tokens: track: color.outline fill: color.primary height: spacing.xs radius: rounded.fullmessages: []obligations: accessibility: role: progressbar name: Label property provides the accessible name when a host requires one; unnamed progressbars are allowed for purely contextual progress. keyboard: [] semantics: - Exposes aria-valuemin 0 and aria-valuemax 100. - Exposes aria-valuenow only when value is present. - Determinate values are clamped to 0..100. behavior: model: stateless interactions: [] hostEffects: [] conditions: - rtl - reduced-motion - cvd-deuteranopia - density-compact sdui: status: serializable serializableProperties: - value - label serializableSlots: [] eventBindings: [] notes: ProgressBar serializes an optional 0..100 determinate value and optional label; omitted value renders indeterminate progress.examples: - name: determinate state: determinate properties: value: 42 label: Upload progress slots: {} - name: indeterminate state: indeterminate properties: label: Preparing release slots: {} - name: complete state: determinate properties: value: 100 label: Import progress slots: {}
Generated from the contract's examples block.
Previews are the published @wyrd-company/react component, themed by the
brand's role tokens — flip the site's light/dark toggle and they follow.
import { WyrdProgressBar } from "@wyrd-company/react";
<WyrdProgressBar value={42} label="Upload progress" />import 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdProgressBar(
value: 42,
label: 'Upload progress',
) import { WyrdProgressBar } from "@wyrd-company/react";
<WyrdProgressBar label="Preparing release" />import 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdProgressBar(
label: 'Preparing release',
) import { WyrdProgressBar } from "@wyrd-company/react";
<WyrdProgressBar value={100} label="Import progress" />import 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdProgressBar(
value: 100,
label: 'Import progress',
) | Name | Type | Default | Summary |
|---|---|---|---|
value | number | undefined | Determinate progress value in the normative 0..100 range; implementations clamp out-of-range values. |
label | string | undefined | Optional accessible name for the progressbar. |
The contract's token bindings. Open the shared contextual sidebar from any example; primary swatches reflect the color you pick there. Error swatches show the active preset's values; editing any knob switches to custom and resets error to TWW · Ink.
| Binding | Token | |
|---|---|---|
track | color.outline | |
fill | color.primary | |
height | spacing.xs | |
radius | rounded.full |
| State | Source | Summary |
|---|---|---|
determinate | property | Value is present and clamped into the 0..100 range. |
indeterminate | property | Value is absent. |
From the contract's accessibility obligations. Role progressbar; Label property provides the accessible name when a host requires one; unnamed progressbars are allowed for purely contextual progress.
Status: serializable. ProgressBar serializes an optional 0..100 determinate value and optional label; omitted value renders indeterminate progress.
| Serializable | Members |
|---|---|
| Properties | value, label |
| Slots | — |
| Events | — |