Display and feedback

CircularProgress

Determinate circular loader with an accessible percentage value.

Live example

24%64%

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

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

/**
 * Complete CircularProgress parameter reference.
 * @param value
 *   type: number
 *   required
 *   example: 64
 * @param max
 *   type: number
 *   default: 100
 *   example: {max}
 * @param label
 *   type: string | renderable content
 *   required
 *   example: "Accessible label"
 * @param size
 *   type: "sm" | "md" | "lg" (plus heading sizes)
 *   default: "md"
 *   example: "md"
 * @param animated
 *   type: boolean
 *   default: false
 *   example: {animated}
 * @param showValue
 *   type: boolean
 *   default: true
 *   example: {showValue}
 * @param formatValue
 *   type: (percentage: number, value: number, max: number) => renderable content
 *   default: —
 *   example: {formatValue}
 * @param span attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function CircularProgressExample() {
  return (
    <CircularProgress label="Uploading assets" value={64} animated showValue />
  );
}

Svelte

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

  // Complete CircularProgress parameter reference.
  // value
  //   type: number
  //   required
  //   example: 64
  // max
  //   type: number
  //   default: 100
  //   example: {max}
  // label
  //   type: string | renderable content
  //   required
  //   example: "Accessible label"
  // size
  //   type: "sm" | "md" | "lg" (plus heading sizes)
  //   default: "md"
  //   example: "md"
  // animated
  //   type: boolean
  //   default: false
  //   example: {animated}
  // showValue
  //   type: boolean
  //   default: true
  //   example: {showValue}
  // formatValue
  //   type: (percentage: number, value: number, max: number) => renderable content
  //   default: —
  //   example: {formatValue}
  // span attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<CircularProgress label="Uploading assets" value={64} />

HTML

<!--
  Complete CircularProgress parameter reference.
  value
    type: number
    required
    example: 64
  max
    type: number
    default: 100
    example: {max}
  label
    type: string | renderable content
    required
    example: "Accessible label"
  size
    type: "sm" | "md" | "lg" (plus heading sizes)
    default: "md"
    example: "md"
  animated
    type: boolean
    default: false
    example: {animated}
  showValue
    type: boolean
    default: true
    example: {showValue}
  formatValue
    type: (percentage: number, value: number, max: number) => renderable content
    default: —
    example: {formatValue}
  span attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<span class="cf-circular-progress" data-animated="true" role="progressbar" aria-label="Uploading assets" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100">…</span>

Contract

CSS selector	`.cf-circular-progress`
Adapters	Native · React · Svelte
Primary props	value · max · label · size · animated · showValue · formatValue · span attributes
Documented states	sm · md · lg · animated · 0–100% · custom maximum · hidden value
Interaction	Static and SSR-safe
Theme	Semantic light and dark tokens

Composition

Native attributes and framework props are forwarded. Add custom classes without replacing the semantic contract.

Parameters

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

Parameter	Type	Default	Adapters	Example	Description
`value`required	`number`	`required`	React · Svelte · HTML	`64`	Selected or reported native value.
`max`	`number`	`100`	React · Svelte · HTML	`{max}`	Highest allowed range or progress value.
`label`required	`string \| renderable content`	`required`	React · Svelte · HTML	`"Accessible label"`	Visible or accessible name, depending on the component.
`size`	`"sm" \| "md" \| "lg" (plus heading sizes)`	`"md"`	React · Svelte · HTML	`"md"`	Applies a design-system size token.
`animated`	`boolean`	`false`	React · Svelte · HTML	`{animated}`	Enables optional progress motion while preserving reduced-motion behavior.
`showValue`	`boolean`	`true`	React · Svelte · HTML	`{showValue}`	Shows formatted output beside the slider label.
`formatValue`	`(percentage: number, value: number, max: number) => renderable content`	`—`	React · Svelte · HTML	`{formatValue}`	Formats visible numeric output without changing the underlying value.
`span attributes`	`native element attributes`	`—`	React · Svelte · HTML	`class / style / aria-* / data-*`	Forwards native class/style, accessibility, event, and data attributes to the root element.