Maßband als Fortschrittsbalken
Ein gelbes Maßband zieht sich mit dem Fortschritt aus und schnellt am Ende zurück in sein Gehäuse.
Einstellungen
Code
<div class="uvq10-tap" role="progressbar" aria-label="Wird geladen" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="tr" aria-hidden="true"><div class="tp"><span style="--i:1">10</span><span style="--i:2">20</span><span style="--i:3">30</span><span style="--i:4">40</span><span style="--i:5">50</span><span style="--i:6">60</span><span style="--i:7">70</span><span style="--i:8">80</span><span style="--i:9">90</span><span style="--i:10">100</span><i class="hk"></i></div></div><div class="cs" aria-hidden="true"><i class="bt"></i><span class="rd"><b>0</b> cm</span></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 Loader
Alle ansehen: LoaderWofür du ihn nutzen kannst
Ein echter Fortschrittsbalken mit role progressbar und aktuellem Wert, gestaltet als Maßband: gelbes Gehäuse mit Gummirand und kleinem Display, dazu ein Metallband mit Millimeter- und Zentimeterstrichen und einem Haken an der Spitze. Bei hundert schnellt das Band mit einem federnden Ruck zurück. Passt zu Baumärkten, Renovierungen und Angebotsrechnern.
Die Hauptfarbe bestimmt Gehäuse und Band, die zweite den Gummirand und die Feststelltaste. Ersetze das Demo-Skript durch deinen echten Fortschritt, indem du den Wert setzt, und lass die Anzeige im Gehäuse als Prozentwert.