Progress Bar Circle · WB Design Wiki

Level: atom.

Purpose

Progress Bar Circle presents one progress value in a compact, square area. Use none for a pure indicator, text for a concise centered label, and icon for a symbolic loading or reward state. It is not a replacement for a multi-step progress control. Use infinite only when the amount completed is unknown; use Linear when progress needs a horizontal track and surrounding labels.

Figma source and verified mapping

Figma component set: Progress Bar / Circle — 30604:179025.
Verified in D-021 (GitLab Issue).
The published set covers 38 combinations of size (128, 96, 64, 48, 32), preset (None, Text, Icon), and thickness (8, 6, 4).
Angular content maps to Figma preset; size, thickness, title text, description text, and the icon map to the corresponding center content.
Figma resolves the ring and text through purple #7F30E3, neutral track #E0E0EB, and the published title/description typography. The current CSS resolves the same values through owned stroke, text, spacing, and typography tokens.

Documented differences

progress, infinite, ARIA naming, value clamping, and reduced motion are runtime behavior, not Figma component properties.
Angular allows seven combinations not published in Figma: Text 48/8, Text 32/{4,6,8}, Icon 48/8, and Icon 32/{6,8}. They are implementation-only until design publishes matching variants; they do not expand Figma coverage.
description is the local name for Figma showText; it is visible only at 128 and 96, matching the published anatomy. Text content is unavailable at 32.

Anatomy and behavior

A track and arc use clamped 0–100 progress; non-finite input becomes zero. Infinite renders an animated fixed arc. Center content can be absent, text or an icon. Size 32 suppresses text, and description is displayed only for sizes 128/96. Title text is explicit content, not an automatically formatted percentage.

Accessibility and content

The root has role progressbar. Determinate mode exposes min/max/current; infinite removes those values and sets aria-busy. Supply ariaLabel or ariaLabelledby even when center text is visible; ariaLabel takes precedence. There are no keyboard actions or completion outputs.

Local component contract

This is the current owned contract for component.progress-bar-circle. Behavior above was checked against the local implementation, template and focused tests listed below. Historical migration evidence does not override these current sources.

Public type values

Classes and selectors

WblProgressBarCircleComponent — wbl-progress-bar-circle (src/app/design-system/primitives/progress-bar-circle/progress-bar-circle.component.ts).

Inputs

WblProgressBarCircleComponent.size = input<WblProgressBarCircleSize>('128')
WblProgressBarCircleComponent.thickness = input<WblProgressBarCircleThickness>(8)
WblProgressBarCircleComponent.progress = input(0)
WblProgressBarCircleComponent.infinite = input(false)
WblProgressBarCircleComponent.content = input<WblProgressBarCircleContent>('none')
WblProgressBarCircleComponent.title = input(true)
WblProgressBarCircleComponent.titleText = input('Title')
WblProgressBarCircleComponent.description = input(true)
WblProgressBarCircleComponent.descriptionText = input('Text')
WblProgressBarCircleComponent.iconName = input<WblIconName>('gift')
WblProgressBarCircleComponent.ariaLabel = input<string | null>(null)
WblProgressBarCircleComponent.ariaLabelledby = input<string | null>(null)

Models

None.

Outputs

None.

Slots and projection markers

The exact template has no Angular content-projection slot.

Local evidence

Behavior/template: src/app/design-system/primitives/progress-bar-circle/progress-bar-circle.component.html (reviewed in D-025, 2026-09-05).
Code: src/app/design-system/primitives/progress-bar-circle/progress-bar-circle.component.ts.
Focused test: src/app/design-system/primitives/progress-bar-circle/progress-bar-circle.component.spec.ts.
Public export: export * from './primitives/progress-bar-circle/progress-bar-circle.component'; in src/app/design-system/index.ts.
Storybook: storybook/stories/progress-bar-circle.stories.ts (Design System/Primitives/wbl-progress-bar-circle).

Figma status

The source above is the verified Figma owner for the 38 published Circle variants. figmaSidecar remains absent: this task links status and behavior but does not introduce a separate reusable Figma assembly contract.

Provenance

The archived source-document copy is historical evidence only. The active resolver is local code/test/export and the exact Storybook story above.