Escáner de código de barras
Un láser rojo barre una etiqueta con código de barras dentro de un visor con esquinas, como en la caja del súper.
Ajustes
Código
<div class="uvq10-bar" role="status"><span class="sr">Escaneando</span><div class="lb" aria-hidden="true"><svg viewBox="0 0 87 46" preserveAspectRatio="none"><rect x="0" width="1" height="46"/><rect x="2" width="1" height="46"/><rect x="5" width="1" height="40"/><rect x="8" width="1" height="40"/><rect x="10" width="3" height="40"/><rect x="14" width="2" height="40"/><rect x="18" width="3" height="40"/><rect x="23" width="1" height="40"/><rect x="25" width="2" height="40"/><rect x="28" width="1" height="40"/><rect x="30" width="1" height="40"/><rect x="33" width="1" height="40"/><rect x="35" width="2" height="40"/><rect x="39" width="1" height="40"/><rect x="42" width="1" height="46"/><rect x="44" width="1" height="46"/><rect x="47" width="1" height="40"/><rect x="49" width="3" height="40"/><rect x="53" width="2" height="40"/><rect x="56" width="1" height="40"/><rect x="59" width="2" height="40"/><rect x="63" width="2" height="40"/><rect x="67" width="2" height="40"/><rect x="70" width="1" height="40"/><rect x="72" width="3" height="40"/><rect x="76" width="1" height="40"/><rect x="78" width="1" height="40"/><rect x="80" width="1" height="40"/><rect x="84" width="1" height="46"/><rect x="86" width="1" height="46"/></svg><span class="dg">8 412345 678905</span><i class="ls"></i></div><i class="cn tl" aria-hidden="true"></i><i class="cn tr" aria-hidden="true"></i><i class="cn bl" aria-hidden="true"></i><i class="cn br" aria-hidden="true"></i></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 etiqueta blanca con un código de barras generado como SVG en línea y sus dígitos, enmarcada por las cuatro esquinas de un visor. Una línea láser roja con un halo suave sube y baja por encima con suavizado en cada extremo. Encaja en apps de comercio, inventarios, validación de entradas, seguimiento de envíos y pantallas que leen códigos.
El color principal fija el láser y el secundario las esquinas del visor, para usar un verde de escaneo o el tono de tu marca. Muéstralo mientras se comprueba un código y cámbialo luego por un estado de éxito claro.