Scanner de code-barres
Un laser rouge balaie une étiquette à code-barres dans un viseur à coins, comme à la caisse du supermarché.
Réglages
Code
<div class="uvq10-bar" role="status"><span class="sr">Analyse en cours</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 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 étiquette blanche avec un code-barres généré en SVG intégré et ses chiffres, encadrée par les quatre coins d'un viseur. Une ligne laser rouge entourée d'un halo doux monte et descend avec un ralenti à chaque extrémité. Il convient aux applis de commerce, outils d'inventaire, contrôle de billets, suivi de colis et écrans qui lisent un code.
La couleur principale fixe le laser, la seconde les coins du viseur, pour un vert de scan ou la teinte de ta marque. Affiche-le pendant la vérification d'un code, puis remplace-le par un état de réussite net.