HTML + CSSLoaders
Self-drawing triangle
A triangle outline that draws itself, changes color at the top of the loop and then empties again.
Settings
72px
1x
Code
<svg class="ul-tri" viewBox="0 0 100 100"><path d="M50 12 L90 84 L10 84 Z" pathLength="100"/></svg>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Loaders
Where to use it
A triangle reads as a mountain, a roof or a play button depending on context, so this SVG loader suits an outdoor gear shop, the booking page of a mountain hut or the site of an architecture studio. The line draws itself, shifts color halfway and erases from where it started, all in CSS.
Clean, minimal layouts suit it best, since the single line needs room to breathe. For more presence, raise the size rather than the speed; a fast triangle looks more like a warning sign than a pause.