Mètre ruban de progression
Un mètre ruban jaune se déroule à mesure que la progression avance et, arrivé au bout, se rembobine d'un coup dans son boîtier.
Réglages
Code
<div class="uvq10-tap" role="progressbar" aria-label="Chargement" 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 pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Loaders
Voir tout : LoadersOù l’utiliser
Une vraie barre de progression avec role progressbar et valeur à jour, en forme de mètre ruban : boîtier jaune à bord caoutchouc avec un petit écran, et lame métallique graduée en millimètres et centimètres avec un crochet au bout. À cent, le ruban revient d'un coup sec et élastique. Il convient aux magasins de bricolage, rénovations et outils de devis.
La couleur principale fixe le boîtier et la lame, la seconde le bord en caoutchouc et le bouton de blocage. Remplace le script de démonstration par ta vraie progression en réglant la valeur, et garde la lecture du boîtier en pourcentage.