¿Nos recomendarías a un amigo?
Arrastra la aguja o usa las flechas
Tachometer needle rating
Rate from 0 to 10 by dragging a car dashboard needle; it springs past the mark and the zone color changes.
Settings
Code
<div class="uvq15-nps"><p class="q">Would you recommend us to a friend?</p><div class="dl" role="slider" tabindex="0" aria-label="Would you recommend us to a friend?" aria-valuemin="0" aria-valuemax="10" aria-valuenow="7" aria-valuetext="7"><svg viewBox="0 0 200 200" aria-hidden="true"><defs><radialGradient id="uvq15-nps-f" cx="50%" cy="40%" r="65%"><stop offset="0" stop-color="#fff" stop-opacity=".12"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient></defs><circle cx="100" cy="100" r="97" class="bz"/><circle cx="100" cy="100" r="91" class="fc"/><circle cx="100" cy="100" r="91" fill="url(#uvq15-nps-f)"/><path d="M27.25 142.00A84 84 0 0 1 147.07 30.43" stroke="#ef4444" stroke-width="5" fill="none"/><path d="M151.62 33.73A84 84 0 0 1 183.20 88.43" stroke="#f59e0b" stroke-width="5" fill="none"/><path d="M183.79 94.02A84 84 0 0 1 172.75 142.00" stroke="#22c55e" stroke-width="5" fill="none"/><line x1="41.98" y1="133.50" x2="32.45" y2="139.00" class="mj"/><line x1="31.52" y1="122.25" x2="25.82" y2="124.10" class="mn"/><line x1="33.37" y1="107.00" x2="22.43" y2="108.15" class="mj"/><line x1="28.39" y1="92.47" x2="22.43" y2="91.85" class="mn"/><line x1="36.28" y1="79.30" x2="25.82" y2="75.90" class="mj"/><line x1="37.65" y1="64.00" x2="32.45" y2="61.00" class="mn"/><line x1="50.21" y1="55.17" x2="42.03" y2="47.81" class="mj"/><line x1="57.68" y1="41.75" x2="54.15" y2="36.90" class="mn"/><line x1="72.75" y1="38.79" x2="68.27" y2="28.74" class="mj"/><line x1="85.03" y1="29.57" x2="83.78" y2="23.70" class="mn"/><line x1="100.00" y1="33.00" x2="100.00" y2="22.00" class="mj"/><line x1="114.97" y1="29.57" x2="116.22" y2="23.70" class="mn"/><line x1="127.25" y1="38.79" x2="131.73" y2="28.74" class="mj"/><line x1="142.32" y1="41.75" x2="145.85" y2="36.90" class="mn"/><line x1="149.79" y1="55.17" x2="157.97" y2="47.81" class="mj"/><line x1="162.35" y1="64.00" x2="167.55" y2="61.00" class="mn"/><line x1="163.72" y1="79.30" x2="174.18" y2="75.90" class="mj"/><line x1="171.61" y1="92.47" x2="177.57" y2="91.85" class="mn"/><line x1="166.63" y1="107.00" x2="177.57" y2="108.15" class="mj"/><line x1="168.48" y1="122.25" x2="174.18" y2="124.10" class="mn"/><line x1="158.02" y1="133.50" x2="167.55" y2="139.00" class="mj"/><text x="52.37" y="127.50">0</text><text x="45.30" y="105.75">1</text><text x="47.69" y="83.00">2</text><text x="59.13" y="63.20">3</text><text x="77.63" y="49.75">4</text><text x="100.00" y="45.00">5</text><text x="122.37" y="49.75">6</text><text x="140.87" y="63.20">7</text><text x="152.31" y="83.00">8</text><text x="154.70" y="105.75">9</text><text x="147.63" y="127.50">10</text><g class="nd" transform="rotate(48 100 100)"><path d="M96 114 L100 20 L104 114 Z"/><circle cx="100" cy="100" r="9" class="hb"/><circle cx="100" cy="100" r="3" class="hc"/></g></svg><div class="rd"><b>7</b><span>Passive</span></div></div><p class="ht">Drag the needle or use the arrow keys</p></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 Microinteractions
See all MicrointeractionsWhere to use it
Net Promoter questions are usually a row of eleven small buttons. This block puts the score on a dark car dial instead: drag the red needle or use the arrow keys, and it swings with a spring, overshoots slightly and settles. The readout shows the number and whether it is a detractor, passive or promoter score.
The Bounce slider controls how much the needle overshoots, from a firm stop to a lively wobble. The main color paints the needle and the secondary one the dial face. Use it at the end of a purchase, in feedback emails or in internal surveys.