Il cursore a corda
Slider, Fisica, SVG
NuovaGratis
Tutti i componenti
L’indicatore a lancetta
Il quadrante di una prova di velocità: la lancetta sta su una molla e sale tremando con la velocità misurata, le tacche che passa si accendono e quelle intorno si allungano; finita ogni metà della prova il numero vola nel suo riquadro e la lancetta ricade rimbalzando sul fermo.
Il codice
Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN. Nelle schede React e Vue la stessa demo è già un componente, che spegne le sue animazioni quando esce dalla pagina.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The needle gauge</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/geist@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the gauge of a speed test: a needle on a spring over a dial of ticks. Starting the test the needle climbs
and wobbles with the measured speed, the ticks it passes light up, the ones around it stretch out; when a
half of the test ends its number flies down into its card and the needle falls back on its stop. The dial
is drawn by the script -->
<div class="gauge" data-gauge>
<div class="gauge__dial" role="meter" aria-label="Download speed" aria-valuemin="0" aria-valuemax="1000" aria-valuenow="0" aria-valuetext="0 megabits per second" data-meter>
<!-- the needle's blur when it moves fast: a soft wedge behind it, under the drawing -->
<span class="gauge__blur" aria-hidden="true" data-blur></span>
<svg class="gauge__face" viewBox="0 -26 400 356" aria-hidden="true">
<g class="gauge__ticks" data-ticks></g>
<g class="gauge__numbers" data-numbers></g>
<g class="gauge__needle" data-needle>
<path class="gauge__pointer" d="M196.8 210.5 L203.2 210.5 L201.3 57 Q200 47 198.7 57 Z"/>
<circle class="gauge__hub" cx="200" cy="200" r="10.5"/>
</g>
</svg>
<div class="gauge__read">
<span class="gauge__phase" data-phase-box><span class="gauge__phase-in" data-phase></span></span>
<span class="gauge__value" data-value>0.0</span>
<span class="gauge__unit">Mbps</span>
</div>
</div>
<div class="gauge__results">
<div class="result" data-result="down">
<span class="result__name"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v13.5M6.5 13 12 18.5 17.5 13"/></svg>Download</span>
<span class="result__num"><span class="result__value is-empty" data-result-value>—</span><span class="result__unit">Mbps</span></span>
</div>
<div class="result" data-result="up">
<span class="result__name"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 19V5.5M6.5 11 12 5.5 17.5 11"/></svg>Upload</span>
<span class="result__num"><span class="result__value is-empty" data-result-value>—</span><span class="result__unit">Mbps</span></span>
</div>
</div>
<button class="go" type="button" data-go data-autoclic>
<span class="go__bar" data-go-bar></span>
<span class="go__label" data-go-label>Start test</span>
</button>
<p class="sr" role="status" aria-live="polite" data-said></p>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="script.js"></script>
</body>
</html>Playground
Cambia valori, colori e testi con le manopole e guarda l’animazione rispondere dal vivo. Oppure scrivi tu nel codice. Poi scarica la cartella con le tue modifiche.
34 valori da cambiare
Oppure chiedila a Claude Code
Col connettore di Animorio, Claude Code la prende da qui con tutta la sua guida e la adatta al tuo progetto. Incolla questa richiesta:
Prendi «L’indicatore a lancetta» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero un quadrante di tacche grigie lungo due terzi di cerchio, con tutt’intorno i numeri 0, 5, 10, 50, 100, 250, 500, 750 e 1000, una lancetta bianca e, sotto il perno, Download, 0.0 e Mbps; più giù due riquadri, Download e Upload, ancora con un trattino, e il pulsante Start test. Aprendo la pagina le tacche compaiono una dopo l’altra e la lancetta corre fino in fondo al quadrante e torna indietro, come il cruscotto di un’auto che si accende. Con Start test il pulsante si fa scuro e si riempie col passare della prova, e la lancetta sale e trema seguendo la velocità misurata: le tacche che ha passato si accendono di bianco, più chiare vicino a lei, quelle intorno si allungano verso l’esterno, i numeri superati diventano bianchi e il numero sotto il perno segue la lancetta; quando corre, dietro di lei resta una scia sfumata. Finita la misura il numero vola giù nel riquadro Download, che fa un piccolo sobbalzo, mentre la lancetta ricade e rimbalza sul fermo dello zero; poi tutto si ripete in arancione per l’upload. Alla fine il pulsante torna bianco con la scritta Test again, e una prova nuova fa uscire dai riquadri i risultati di prima.
Come funziona
Una scala tirata
I numeri di SCALE stanno a distanze uguali sul quadrante, anche se fra 0 e 10 c’è tanto spazio quanto fra 500 e 750: angleOf e valueOf passano da una velocità al suo angolo e indietro tratto per tratto. Ogni tratto ha lo stesso numero di tacche, così sotto ogni numero cade sempre una tacca lunga; quadrante e numeri li disegna lo script.
La lancetta su una molla
La lancetta ha un angolo e una velocità, e una molla con la rigidità e lo smorzamento di SPRING la tira verso l’angolo da mostrare; il conto si fa sul ticker di GSAP a passi di 4 millisecondi. Ai due capi del quadrante ci sono due fermi: la lancetta ci sbatte e torna indietro con una parte della sua velocità, e per questo, ricadendo a zero, rimbalza.
Le tacche che si svegliano
A ogni fotogramma in cui la lancetta si muove, ogni tacca guarda quanto le è lontana: se è stata passata prende la classe is-lit (il colore viene da --phase, con una transizione) e un’opacità che cala allontanandosi; nei 15 gradi intorno alla lancetta si allunga verso l’esterno. Lo script ricorda l’ultimo valore di ogni tacca e cambia solo quelle diverse.
La scia
Dietro la lancetta c’è un elemento rotondo con un conic-gradient: largo quanto la sua velocità (fino a 30 gradi), più forte vicino alla lancetta, dal lato da cui arriva; una maschera radiale lo spegne vicino al perno. Lo script gli cambia solo tre variabili, --from, --span e --alpha.
Le due metà della prova
Mentre si misura, la velocità da mostrare sale come 1 − e^(−t/0,42) verso un valore a caso fra quelli di DOWN o di UP, con tre onde che la fanno tremare di JITTER e calano verso la fine; il pulsante si riempie in TEST secondi. Finita la misura una copia del numero vola nel riquadro, con x e y su due curve diverse così il volo è un arco e scalata col rapporto fra le due grandezze del carattere, mentre la lancetta torna a zero.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
TEST | script.js | 3.2 | I secondi in cui misura ognuna delle due metà della prova. |
SPRING | script.js | [150, 0.36] | La molla della lancetta: quanto è rigida e quanto è frenata (1 = senza rimbalzi). |
JITTER | script.js | 0.08 | Quanto trema la velocità misurata mentre la prova va. |
DOWN | script.js | [280, 920] | Fra quali valori cade la velocità di download inventata, in Mbps. |
UP | script.js | [60, 340] | Fra quali valori cade la velocità di upload inventata, in Mbps. |
SCALE | script.js | [0, 5, 10, 50, 100, 250, 500, 750, 1000] | I numeri del quadrante, messi a distanze uguali. |
SWEEP | script.js | true | Se aprendo la pagina la lancetta corre fino in fondo al quadrante e torna indietro. |
Quando usarla
Per una prova di velocità della connessione, e per tutto quello che si misura mentre lo si guarda: un caricamento, una potenza, dei giri al minuto, un punteggio, la qualità di un segnale.
Sul telefono
Il quadrante prende la larghezza dello schermo meno un margine e i riquadri si stringono sotto i 400 pixel; due tocchi veloci sul pulsante non ingrandiscono la pagina.
Con il movimento ridotto
Niente corsa all’apertura, niente molla, tremolio, tacche allungate o scia: la lancetta sale piano fino alla velocità e torna a zero di colpo, e i risultati compaiono nei riquadri senza volare.
Trappole
- Il numero sotto il perno si calcola dall’angolo della lancetta, non dalla velocità misurata: così rimbalza e trema insieme a lei, e quando la lancetta va oltre il valore lo fa anche lui.
- Una molla rigida su un fotogramma lento esplode: il conto si fa a passi di 4 millisecondi al massimo.
- I numeri del quadrante stanno fuori dalle tacche: dentro, la lancetta ferma sullo zero ne coprirebbe uno per sempre.
- Il numero che vola si misura con le cifre vere: lo script scrive il risultato nel riquadro, ancora invisibile, prima di misurarlo, e scala la copia col rapporto fra le grandezze dei due caratteri: così le cifre arrivano esattamente sopra quelle del riquadro.
- La scia è un elemento posizionato messo prima del disegno: perché resti sotto la lancetta, l’SVG deve essere anche lui position: relative, o l’elemento posizionato verrebbe dipinto sopra.
Librerie
GSAP 3.15.0, Geist (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,2 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 3 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Fatto
Licenza d’uso
Puoi usarla nei tuoi progetti e in quelli dei tuoi clienti. Non puoi rivenderla né ridistribuirla così com’è. GSAP resta sotto la sua licenza Standard. Licenza completa.
