Tape measure progress bar
A yellow tape measure stretches out as progress grows and, when it reaches the end, snaps back into its case.
Settings
Code
<div class="uvq10-tap" role="progressbar" aria-label="Loading" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="tr" aria-hidden="true"><div class="tp"><span style="--i:1">10</span><span style="--i:2">20</span><span style="--i:3">30</span><span style="--i:4">40</span><span style="--i:5">50</span><span style="--i:6">60</span><span style="--i:7">70</span><span style="--i:8">80</span><span style="--i:9">90</span><span style="--i:10">100</span><i class="hk"></i></div></div><div class="cs" aria-hidden="true"><i class="bt"></i><span class="rd"><b>0</b> cm</span></div></div>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
See all LoadersWhere to use it
A real progress bar with role progressbar and a live value, shown as a tape measure: a yellow case with a rubber rim and a small display, and a metal blade with millimetre and centimetre ticks and a hook at the tip. When it reaches one hundred the tape snaps back with a springy jolt. It suits DIY shops, renovation and quote tools.
The main color sets the case and the blade, the second the rubber rim and the lock button. Replace the demo script with your real progress by setting the value, and keep the reading in the case as the percentage.