Triangle qui se dessine
Le contour d’un triangle qui se trace tout seul, change de couleur à mi-parcours puis se vide à nouveau.
Réglages
Code
<svg class="ul-tri" viewBox="0 0 100 100"><path d="M50 12 L90 84 L10 84 Z" pathLength="100"/></svg>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
Selon le contexte, un triangle évoque une montagne, un toit ou un bouton lecture : ce loader SVG va donc bien à une boutique de matériel outdoor, à la réservation d’un refuge ou au site d’un cabinet d’architecture. Le trait se dessine, change de couleur à mi-chemin et s’efface depuis son point de départ, le tout en CSS.
Il rend mieux dans les mises en page épurées, où ce trait unique a de la place. Pour plus de présence, augmentez la taille plutôt que la vitesse : un triangle rapide ressemble davantage à un panneau d’alerte qu’à une pause.