> For the complete documentation index, see [llms.txt](https://docs.frayme.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.frayme.ai/components/components/feedback/loading-overlay.md).

# LoadingOverlay

A loading scrim that dims a region (its children) and centers a spinner + optional label while `active`. The region always renders; when `active` the scrim sits on top (role=status, aria-busy). Wrap a card/panel/table whose content is loading. `active` is reactive out of the box (toggles locally when unbound, syncs when bound).

Accepts child elements via `children` (the `default` slot).

## Example

```json
{
  "root": "loading-overlay",
  "elements": {
    "loading-overlay": {
      "type": "LoadingOverlay",
      "props": {
        "active": true,
        "label": "Loading…"
      }
    }
  }
}
```

## Props

| Prop           | Type                   | Description                                                                                                                                                                                                           |
| -------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `active`       | `boolean`              | Whether the loading scrim + spinner are shown over the region (default true). Bind this to a loading flag, or toggle it locally. (Named `active`, not `visible` — `visible` is a reserved json-render element field.) |
| `label`        | `string`               | Optional status text shown under the spinner (e.g. "Saving…").                                                                                                                                                        |
| `blur`         | `boolean`              | Blur the covered region behind the scrim while loading.                                                                                                                                                               |
| `spinnerSize`  | `"sm" \| "md" \| "lg"` | Spinner diameter + border thickness: sm (20px, 2px border) · md (32px, 2px border, default) · lg (48px, 3px border).                                                                                                  |
| `overlayColor` | `string`               | Exact dim/scrim color (default a 60% translucent background-token wash). Names a specific overlay tint.                                                                                                               |
| `color`        | `string`               | Accent colour of the spinner head + the status label under it (spinner head defaults to the primary token, label to the foreground token) — one role, recolored together.                                             |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.frayme.ai/components/components/feedback/loading-overlay.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.