Components

ProgressView

Display measurable progress or an indeterminate task.

Example

Requires React 18.2+ or 19 and shared styles. See setup.

Default

Loading preview…

Code
'use client';
import { ProgressView } from '@swiftuijs/ui';
import { VStack } from '@swiftuijs/ui';
export default function Example() {
    return ((<VStack spacing={16}>
      <ProgressView aria-label="Zero progress" value={0}/>
      <ProgressView aria-label="Quarter progress" value={0.25}/>
      <ProgressView aria-label="Half progress" value={0.5}/>
      <ProgressView aria-label="Three-quarter progress" value={0.75}/>
      <ProgressView aria-label="Complete progress" value={1}/>
    </VStack>));
}

Usage and limitations

  • Use value plus total for real units. Without total, value is a fraction from 0 to 1. Legacy progress and completed aliases remain supported.
  • indeterminate removes numeric value semantics and animates when duration is unknown.
  • label and currentValueLabel display task/progress text; keep them in sync with the actual work. Provide visible or accessible labeling and place progress near its task.

More examples

Determinate Values
Indeterminate Progress
Animated Progress

API reference

PropTypeRequiredDescription
valuenumberNoThe current progress value. When `total` is omitted, `value` is treated as a fractional value between 0 and 1.
totalnumberNoThe total value for calculating progress.
progressnumberNoLegacy fractional progress alias retained for existing callers.
completednumberNoLegacy current value alias retained for existing callers.
indeterminatebooleanNoWhether to show an indeterminate progress indicator. Default: false
labelReactNodeNoOptional leading label rendered alongside the progress indicator.
currentValueLabelReactNodeNoOptional trailing value label rendered alongside the progress indicator.

Inherits additional props from Omit<IBaseElementComponent<'div'>, 'children'>.

Edit this page on GitHubReport an issue

PresentationDragIndicator

PresentationDragIndicator adapts SwiftUI's `presentationDragIndicator` modifier into an explicit wrapper.

RadialGradient

RadialGradient fills a view outward from a center point using color stops.