Cinta métrica de progreso
Una cinta métrica amarilla se estira con el avance y, al llegar al final, se recoge de golpe dentro de su carcasa.
Ajustes
Código
<div class="uvq10-tap" role="progressbar" aria-label="Cargando" 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 para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Loaders
Ver todos: LoadersDónde usarlo
Una barra de progreso real, con role progressbar y valor actualizado, en forma de cinta métrica: carcasa amarilla con borde de goma y una pantallita, y una hoja metálica con marcas de milímetros y centímetros y un gancho en la punta. Al llegar a cien la cinta se recoge con un tirón elástico. Encaja en tiendas de bricolaje, reformas y presupuestos.
El color principal fija la carcasa y la hoja, y el secundario el borde de goma y el botón de freno. Sustituye el script de demostración por tu progreso real cambiando el valor, y deja la lectura de la carcasa como porcentaje.