AIMRAN
HTML + CSSToasts

Toast für niedrigen Akku

Der Akku leert sich bis ins Rot und bietet per Schalter den Stromsparmodus an.

Einstellungen

16px
1x

Code

<div class="uv-qbt"><button type="button" class="fire">Erneut zeigen</button><div class="tt" role="alert"><span class="bt" aria-hidden="true"><i></i></span><span class="tx"><b>Akku schwach</b><small>Noch 10 %, etwa 25 Minuten</small></span><label class="sw"><span>Sparen</span><input type="checkbox" role="switch"><i></i></label></div></div>

Prompt für KI

Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.

Mehr aus Toasts

Alle ansehen: Toasts

Animierte Toast-Benachrichtigung

ToastsReact + Motion

Elastischer Erfolgs-Toast

ToastsHTML + CSS

Toast mit Rückgängig-Button

ToastsHTML + CSS

Toast mit Upload-Fortschritt

ToastsHTML + CSS

Fehler-Toast mit Wackeln

ToastsHTML + CSS

Toast für neue Nachrichten

ToastsHTML + CSS

Gestapelte Toasts

ToastsHTML + CSS

Insel-Pillen-Toast

ToastsHTML + CSS

Wofür du ihn nutzen kannst

Begleit-Apps für Geräte, E-Scooter, Wearables und Smart Homes müssen vor leerem Akku warnen, auffällig, aber ruhig. Dieser Toast animiert den Akku von Grün über Gelb zu einem roten Streifen, lässt ihn dreimal blinken, nennt Prozent und Restzeit und bietet direkt einen Stromspar-Schalter an.

Beim Einschalten färbt sich der Akku um und zeigt, dass es gewirkt hat. Der Toast nutzt role alert, weil die Meldung dringend ist, der Schalter ist eine native Checkbox mit Rolle switch.