SwiftUI.js
Components

ProgressView

ProgressView displays determinate or indeterminate task progress using web-native `progressbar` semantics with a SwiftUI-style `value` and `total` API.

ProgressView displays determinate or indeterminate task progress using web-native `progressbar` semantics with a SwiftUI-style `value` and `total` API.

Examples

Basic Usage

Preview unavailable for this example in the static docs build.

Show code
<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>

Determinate Values

Preview unavailable for this example in the static docs build.

Show code
<VStack spacing={16}>
      <ProgressView
        aria-label="File upload"
        label="Uploading file"
        currentValueLabel="30%"
        value={30}
        total={100}
      />
      <ProgressView
        aria-label="Install progress"
        label="Installing update"
        currentValueLabel="4 of 7"
        value={4}
        total={7}
      />
    </VStack>

Indeterminate Progress

Preview unavailable for this example in the static docs build.

Show code
<VStack spacing={16}>
      <Text>Waiting for server response</Text>
      <ProgressView
        aria-label="Loading"
        indeterminate
      />
    </VStack>

Animated Progress

Preview unavailable for this example in the static docs build.

Show code
const AnimatedProgressDemo = () => {
  const [progress, setProgress] = useState(0)
  
  useEffect(() => {
    const interval = setInterval(() => {
      setProgress((prev) => {
        if (prev >= 1) return 0
        return prev + 0.1
      })
    }, 200)
    return () => clearInterval(interval)
  }, [])
  
  return (
    <VStack spacing={16}>
      <Text>Progress: {Math.round(progress * 100)}%</Text>
      <ProgressView
        aria-label="Animated progress"
        value={progress}
        currentValueLabel={`${Math.round(progress * 100)}%`}
      />
    </VStack>
  )
}

API

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'>.

Overview

ProgressView displays determinate or indeterminate task progress using web-native progressbar semantics with a SwiftUI-style value and total API.

SwiftUI Correspondence: Similar to SwiftUI's ProgressView.

Notes

  • value follows SwiftUI's mental model and can be paired with total
  • When total is omitted, value is treated as a fractional value between 0 and 1
  • progress and completed remain supported as legacy aliases for existing callers
  • indeterminate removes value semantics and shows an animated loading bar
  • label and currentValueLabel render visible progress metadata alongside the bar

Best Practices

  1. Value model: Prefer value plus total when you have real units, not just percentages.
  2. Feedback: Keep currentValueLabel in sync with user-visible progress when the task is long-running.
  3. Indeterminate: Use indeterminate only when the task duration is unknown.
  4. Labels: Provide a visible label or an accessible label via aria-label.
  5. Placement: Put ProgressView close to the task it describes.

PresentationDragIndicator

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

RadialGradient

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

On this page

OverviewNotesBest Practices