# 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.

```yaml
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`). |

## Related Pages

- [Pages Overview](/en/docs/pages-overview) — the component model.
- [Overlay Components](/en/docs/overlay-components) — `progress` and `skeleton` are also overlay-adjacent.
- [Interactivity & Scripts](/en/docs/interactivity-scripts) — auto-save status indicators.
- [Data Components](/en/docs/data-components) — loading states for data-bound components.