Skip to main content
View as Markdown

Feedback Components

Feedback components communicate progress and loading state: a progress bar/circle, a spinner, and skeleton placeholders. All accept the shared props bag plus visibility and responsive modules.

components:
  - type: progress
    progressValue: 60
    progressMax: 100
    props: { showLabel: true, size: sm }
  - type: skeleton
    skeletonVariant: rectangular
    props: { animate: true }

progress

A determinate progress indicator, rendered as a bar or circle.

Property Description
progressValue Current value (0 to progressMax).
progressMax Maximum value (default: 100).
props.showLabel Display the percentage label.
props.size Size preset (e.g. sm for a thinner bar).
props.progressVariant circle renders a circular progress with the percentage in the center.

spinner

An indeterminate loading spinner for short waits.

Property Description
props.size Spinner size preset.
props Additional HTML attributes (e.g. className for color).

skeleton

A shaped loading placeholder shown while content is fetching.

Property Description
skeletonVariant Shape: text, circular, or rectangular.
skeletonWidth CSS width (e.g. 200px, 100%).
skeletonHeight CSS height (e.g. 20px, 3rem).
props.animate Enable the pulse animation (default: true).