Skip to main content
Browse docs

Marwes documentation

ProgressBar

Determinate progress component with optional label and percentage text, small/default Figma track sizes, and shared progressbar semantics across adapters.

What this family solves

Determinate progress component with optional label and percentage text, small/default Figma track sizes, and shared progressbar semantics across adapters.

Use when

  • The UI needs to communicate determinate completion, upload, import, or setup progress.
  • A visible label and percentage should be displayed together with a compact track.
  • React, Vue, and Svelte consumers need the same read-only progress semantics.

Avoid when

  • The user should adjust the value; use SliderField instead.
  • The state is indeterminate; use Spinner or a loading-specific composition instead.
  • The surrounding UI cannot provide a truthful accessible name when the visible label is hidden.

Public imports

Choose an adapter in the verified examples. The inventory below reflects each framework package exactly.

React — @marwes-ui/react

Component

ProgressBar

Type

ProgressBarProps

Vue — @marwes-ui/vue

Component

ProgressBar

Type

ProgressBarProps

Svelte — @marwes-ui/svelte

Component

ProgressBar

Type

ProgressBarProps

Verified minimal examples

These examples come from the same fixtures verified by the repository checks.

React

import { ProgressBar } from "@marwes-ui/react"

export function Example() {
  return <ProgressBar label="Progress" value={60} size="small" />
}

Vue

<script setup lang="ts">
import { ProgressBar } from "@marwes-ui/vue"
</script>

<template>
  <ProgressBar label="Progress" :value="60" size="small" />
</template>

Svelte

<script lang="ts">
  import { ProgressBar } from "@marwes-ui/svelte"
</script>

<ProgressBar label="Progress" value={60} size="small" />

Accessibility requirements

  • Accessible progress name: Provide a truthful label whenever the visible label is hidden.
  • Progress announcement review: Verify changing progress values are announced appropriately for the duration of the product flow.
  • Manual review boundary: Visual review against the synced light and dark Figma progress-bar frames.
  • Manual review 2: Product-level review when hiding the visible label so the accessible name remains truthful.

Theming

Progress Bar uses Marwes preset CSS and theme variables. Customize it through the theme passed to MarwesProvider; do not add a second component stylesheet. See the theming guide for configuration and token details.

Resources