Skip to content

← All components

Display and feedback

Progress

Determinate or indeterminate task progress with native semantics.

Live example

64%
64%
In progress

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

tsx
import { Progress } from "@cofob/design-system-react";

/**
 * Complete Progress parameter reference.
 * @param value
 *   type: string | number
 *   default: —
 *   example: "overview"
 * @param max
 *   type: number
 *   default: 100
 *   example: {max}
 * @param label
 *   type: string | renderable content
 *   default: —
 *   example: "Accessible label"
 * @param valueLabel
 *   type: adapter-specific
 *   default: —
 *   example: "overview"
 * @param animated
 *   type: boolean
 *   default: false
 *   example: {animated}
 * @param showValue
 *   type: boolean
 *   default: true
 *   example: {showValue}
 * @param progress attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function ProgressExample() {
  return (
    <Progress label="Uploading" value={64} animated showValue />
  );
}

Svelte

svelte
<script lang="ts">
  import { Progress } from "@cofob/design-system-svelte";

  // Complete Progress parameter reference.
  // value
  //   type: string | number
  //   default: —
  //   example: "overview"
  // max
  //   type: number
  //   default: 100
  //   example: {max}
  // label
  //   type: string | renderable content
  //   default: —
  //   example: "Accessible label"
  // valueLabel
  //   type: adapter-specific
  //   default: —
  //   example: "overview"
  // animated
  //   type: boolean
  //   default: false
  //   example: {animated}
  // showValue
  //   type: boolean
  //   default: true
  //   example: {showValue}
  // progress attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<Progress label="Uploading" value={64} animated showValue />

HTML

html
<!--
  Complete Progress parameter reference.
  value
    type: string | number
    default: —
    example: "overview"
  max
    type: number
    default: 100
    example: {max}
  label
    type: string | renderable content
    default: —
    example: "Accessible label"
  valueLabel
    type: adapter-specific
    default: —
    example: "overview"
  animated
    type: boolean
    default: false
    example: {animated}
  showValue
    type: boolean
    default: true
    example: {showValue}
  progress attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<div class="cf-progress" data-animated="true"><progress class="cf-progress__track" value="64" max="100">64%</progress></div>

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

ParameterTypeDefaultAdaptersExampleDescription
valuestring | number—React · Svelte · HTML"overview"Selected or reported native value.
maxnumber100React · Svelte · HTML{max}Highest allowed range or progress value.
labelstring | renderable content—React · Svelte · HTML"Accessible label"Visible or accessible name, depending on the component.
valueLabeladapter-specific—React · Svelte · HTML"overview"Configures valueLabel.
animatedbooleanfalseReact · Svelte · HTML{animated}Enables optional progress motion while preserving reduced-motion behavior.
showValuebooleantrueReact · Svelte · HTML{showValue}Shows formatted output beside the slider label.
progress attributesnative element attributes—React · Svelte · HTMLclass / style / aria-* / data-*Forwards native class/style, accessibility, event, and data attributes to the root element.