Barre de progression rayée
Une barre de progression à rayures diagonales mobiles, qui se remplit, repart de zéro et se remplit encore.
Réglages
Code
<div class="ul-st"><i></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
Où l’utiliser
Des rayures en mouvement ont un air de chantier, un peu comme un ruban de signalisation. Cette barre de progression rayée en CSS va donc naturellement sur la page de maintenance d’une boutique en ligne, l’étape de sauvegarde d’un créateur de sites ou l’écran de téléchargement d’un installateur. Les rayures avancent même quand le remplissage prend son temps.
Par défaut, le remplissage tourne en boucle : il donne une impression, pas un vrai pourcentage. Si vous connaissez la progression réelle, retirez l’animation de remplissage, fixez la largeur vous-même et gardez les rayures. Des couleurs très contrastées vibrent ; des duos plus doux reposent l’œil.