Web-Element

Wartelauf

Eine Warteanimation für Vorgänge, die mehrere Sekunden brauchen. Die Figur aus dem Favicon läuft über den Fortschrittsbalken zu ihrem Schreibtisch. Kommt sie an, ist der Vorgang fertig. Der Balken startet schnell und bremst zum Ende hin ab, bei 90 Prozent wartet er auf die echte Antwort.

Erwartete Dauer

Schmale Ansicht

Dieselbe Steuerung in einem engen Container. Das Element misst über eine Container-Query seine eigene Breite, nicht die des Fensters. Unter 420 Pixel schrumpfen Figur, Tisch und Bahn deshalb überall mit, auch eingebettet in einer schmalen Spalte.

Ist im Betriebssystem die Einstellung für reduzierte Bewegung aktiv, ruhen Gang, Wippen und Dampf. Balken und Schritttext laufen weiter, denn das ist die eigentliche Information.

Einbau

Zwei Dateien, ein leeres Element, ein Aufruf. Keine Bibliothek nötig. /api/endpunkt steht stellvertretend für deine eigene Adresse, die Schritttexte für das, was dort wirklich passiert. abschliessen() läuft, wenn die Antwort da ist, fehler("Grund") bei einem Abbruch. 

<link rel="stylesheet" href="/css/wartelauf.css" />
<script src="/js/wartelauf.js"></script>

<div id="meinWartelauf"></div>

<script>
var lauf = wartelaufStarten(document.getElementById("meinWartelauf"), {
    erwarteteDauerMs: 30000,
    schritte: ["Anfrage wird gesendet", "Daten werden geprüft",
               "Ergebnis wird berechnet", "Fast fertig"]
});

fetch("/api/endpunkt", { method: "POST" })
    .then(function () { lauf.abschliessen(); })
    .catch(function () { lauf.fehler("Verbindung fehlgeschlagen."); });
</script>