# StatusOverlay

Feedback auf dem sehr Container, wo die Aktion stattfand: Ladevorgang, erledigt oder fehlgeschlagen, mit der Notice darüber.

## Playground

```html
<div class="feitio-status-host"><div class="feitio-stack" data-gap="3"><strong>Erinnerung</strong><div class="feitio-field"><label class="feitio-label" for="pg-so">Name der Erinnerung</label><input class="feitio-input" id="pg-so" value="Pflanzen gießen"></div><div><button class="feitio-button" type="button" data-variant="primary">Speichern</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>
```

## Wann verwenden

-   Bei jeder Aktion, die Zeit benötigt oder einen Zustand ändert: Speichern, Löschen, Senden.

## Wann nicht verwenden

-   **Auf dem ganzen Bildschirm**, für eine Aktion an einem Teil davon.
-   **Anstatt der Notice:** die Animation zeigt etwas geschehens; die Notice sagt was.

## Beispiele

### Eine Erinnerung speichern

Tippen Sie auf Speichern. Wechseln Sie zum Testergebnis, um den Fehler zu sehen.

Code anzeigen

```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>
```

## Die Sequenz

-   **Loading:** das Dunkel kommt und der Strich dreht sich; eine zweite Einreichung wird ignoriert.
-   **Es hat funktioniert:** das Kreuz wird in Moos gezeichnet, das Dunkel zieht ab, und die Notice kommt darüber herein.
-   **Es ist fehlgeschlagen:** das X im Wein, das Dunkel zieht ab, und die Fehler-Notice kommt darüber herein und nimmt den Fokus.
-   **Reduzierte Bewegung:** das Zeichnen erscheint fertig.

## Anatomie

1.  **Dim:** der Container mit Papier darauf; der Inhalt ist noch da und nimmt keine Berührungen.
2.  **Das Zeichen:** die drehende Strichlinie, das Häkchen oder das X, jedes aus zwei Strichen bestehend.
3.  **Das Wort:** kurz, für diejenigen, die das Zeichen nicht sehen können.

## Die drei Zustände

Saving…

Laden

Saved

Es hat funktioniert

Not saved

Es ist fehlgeschlagen

## Barrierefreiheit

-   Das Wort sitzt in einem `role="status"`: Screenreader verkünden „Speichern…" und dann das Ergebnis.
-   Während der Aktion erhält der Container `aria-busy="true"`.

## Attribute

Attribut

Werte

Zum Zweck

`class="feitio-status-host"`

am Container

Was dunkelt.

`data-state`

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

Welches Zeichnen und welches Wort.

`class="feitio-status"`

letztes Kind

Das Dunkel, das Zeichnen und das Wort.