# StatusOverlay

Feedback on the very container where the action happened: loading, done or failed, with the Notice right above.

## Playground

```html
<div class="feitio-status-host"><div class="feitio-stack" data-gap="3"><strong>Reminder</strong><div class="feitio-field"><label class="feitio-label" for="pg-so">Reminder name</label><input class="feitio-input" id="pg-so" value="Water the plants"></div><div><button class="feitio-button" type="button" data-variant="primary">Save</button></div></div><div class="feitio-status" role="status"><svg viewBox="0 0 48 48" aria-hidden="true"><g class="loading"><path pathLength="1" d="M24 7 C34 6.5 41.5 14 41 24 C40.6 33 33 41 24 41.2"></path><path pathLength="1" d="M25.5 41 C14.5 41.6 6.8 33.5 7.2 23.6 C7.6 14 14.6 7.4 23 6.4"></path></g><g class="ok"><path pathLength="1" d="M13 25 L21 33.5"></path><path pathLength="1" d="M19.5 34 L36 14.5"></path></g><g class="error"><path pathLength="1" d="M15 15 L33.5 33"></path><path pathLength="1" d="M33 14.5 L15.5 33.5"></path></g></svg><span class="label"></span></div></div>
```

## When to use

-   On every action that takes time or changes a state: save, delete, send.

## When not to use

-   **On the whole screen**, for an action on one part of it.
-   **Instead of the Notice:** the animation shows something happened; the Notice says what.

## Examples

### Saving a reminder

Tap Save. Switch the test result to see the error.

Show code

```html
<div class="notice-slot" aria-live="polite"></div>
<form class="feitio-status-host" data-state="loading" aria-busy="true">
  …
  <div class="feitio-status" role="status">
    <svg viewBox="0 0 48 48" aria-hidden="true">…</svg>
    <span class="label">Salvando…</span>
  </div>
</form>
```

## The sequence

-   **Loading:** the dim comes in and the stroke spins; a second submit is ignored.
-   **It worked:** the check is drawn in moss, the dim leaves, and the Notice comes in above.
-   **It failed:** the X in wine, the dim leaves, and the error Notice comes in above and takes focus.
-   **Reduced motion:** the drawing appears finished.

## Anatomy

1.  **Dim:** the container, with paper on top; the content is still there, taking no taps.
2.  **The drawing:** the spinning stroke, the check or the X, each made of two strokes.
3.  **The word:** short, for those who cannot see the drawing.

## The three states

Saving…

Loading

Saved

It worked

Not saved

It failed

## Accessibility

-   The word sits in a `role="status"`: screen readers announce "Saving…" and then the result.
-   During the action, the container gets `aria-busy="true"`.

## Attributes

Attribute

Values

What for

`class="feitio-status-host"`

on the container

What dims.

`data-state`

`"loading"`, `"ok"`, `"error"`

Which drawing and which word.

`class="feitio-status"`

last child

The dim, the drawing and the word.