Reise vorbereiten de 4
Checkliste mit Fortschrittsbalken
Vier Aufgaben, die beim Abhaken einen Balken füllen und einen Zähler erhöhen, ganz ohne JavaScript.
Einstellungen
Code
<div class="uv-cpg"><ul><li><label><input type="checkbox"><span class="bx"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span><span class="tx">Reisepass</span></label></li><li><label><input type="checkbox"><span class="bx"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span><span class="tx">Handyladekabel</span></label></li><li><label><input type="checkbox"><span class="bx"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span><span class="tx">Sonnenbrille</span></label></li><li><label><input type="checkbox"><span class="bx"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span><span class="tx">Taxi buchen</span></label></li></ul><p class="hd"><span class="ti">Reise vorbereiten</span><span class="ct"><span class="n"></span> <span>von 4</span></span></p><div class="br"><i></i></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 Checkboxen
Alle ansehen: CheckboxenWofür du ihn nutzen kannst
Diese kompakte Checklisten-Karte zählt erledigte Aufgaben mit CSS-Countern und füllt den Fortschrittsbalken über den :has-Selektor, sie braucht also kein Skript. Jeder Eintrag ist eine native Checkbox mit rundem Haken, erledigte Aufgaben werden blasser und durchgestrichen. Passt zu Packlisten, Onboarding-Schritten, Launch-Checklisten und Habit-Trackern.
Den Titel änderst du mit dem Textfeld, die vier Aufgaben im HTML. Der Balken nutzt einen Verlauf zwischen beiden Farben, und der Titel wechselt zur zweiten Farbe, wenn alles erledigt ist.