L’indicatore a lancetta
Contatori, Fisica, SVG
NuovaGratis
Tutti i componenti
Il timer ad anello
Un timer da tè che si regola girando la manopola intorno all’anello, come un timer da cucina: l’arco la segue su una molla e le cifre rotolano; partito, l’arco fa il giro intero e si svuota col tempo che passa, e allo scadere l’anello suona, trema come una campanella e lancia raggi.
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 ring timer</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/urbanist@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the ring timer: the time is set by turning the knob round the ring (or with a kind of tea), runs down as the
arc shrinks back, and rings when it is up -->
<div class="timer" data-timer data-autoclic>
<div class="dial" data-dial>
<svg class="dial__art" viewBox="0 0 320 320" aria-hidden="true" data-art>
<circle class="dial__track" cx="160" cy="160" r="130"/>
<g class="dial__ticks" data-ticks></g>
<path class="dial__arc" data-arc/>
<g class="dial__rays" data-rays></g>
</svg>
<div class="dial__knob" role="slider" tabindex="0" aria-label="Time" aria-valuemin="5" aria-valuemax="300" data-knob></div>
<div class="dial__face">
<span class="dial__time" data-time></span>
<span class="dial__label" data-label></span>
</div>
</div>
<div class="teas" role="group" aria-label="Kinds of tea" data-teas></div>
<div class="controls">
<button class="ctl ctl--ghost" type="button" aria-label="Start over" data-reset>
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5.5 9A7.5 7.5 0 1 1 4.6 14M5 4.5V9h4.5"/></svg>
</button>
<button class="ctl ctl--main" type="button" aria-label="Start" data-go>
<svg viewBox="0 0 24 24" aria-hidden="true"><polygon data-shape/><polygon data-shape/></svg>
</button>
</div>
<p class="sr" aria-live="polite" data-live></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.
18 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 «Il timer ad anello» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero un anello scuro con sessanta tacche (più lunghe ogni cinque), un arco color matcha che parte dall’alto e ne copre due quinti con una manopola bianca in fondo, e in mezzo 2:00 e Green tea; sotto, tre tè, Green tea 2:00 acceso, Black tea 4:00 e Herbal 5:00, un pulsante tondo per ricominciare e un grande pulsante matcha play. Trascinando la manopola intorno all’anello, o premendo sull’anello, il tempo cambia di cinque secondi alla volta: l’arco segue su una molla, le tacche sotto di lui si accendono, le cifre rotolano ognuna nella sua finestra e la manopola fa un cenno a ogni passo; un tè mette il suo tempo e l’arco ci corre. Con play il segno si piega in pausa, la manopola si ritira e l’arco fa il giro dell’anello intero, poi torna verso l’alto man mano che il tempo passa, con le cifre che scendono secondo per secondo. Pausa, ricomincia. A zero il quadrante trema come una campanella, dall’anello partono due volte dei raggi, le cifre lampeggiano e compare Ready; poi torna al tempo scelto e la manopola ricompare.
Come funziona
L’arco e la manopola
L’arco è un path SVG dall’alto, col large-arc-flag quando supera la metà (e due mezzi archi quando è intero); la sua lunghezza è una parte dell’anello che una molla (SPRING) porta al valore giusto, calcolata sul ticker di GSAP a passi di 4 millisecondi. Mentre si regola, la parte è il tempo sulla scala del quadrante (MAX secondi un giro); partito, è la parte di tempo che resta, e così alla partenza l’arco corre fino all’anello intero. La manopola sta in fondo all’arco, piazzata da GSAP (x e y), e fa un cenno con scale a ogni passo.
Girare la manopola
L’angolo dal centro al puntatore diventa secondi, arrotondati a STEP. Passando dalla cima l’angolo salterebbe di un giro intero: la differenza dall’angolo precedente si corregge di un giro e la mano si ferma agli estremi (niente salto da 5:00 a 0:05).
Le cifre
Ogni cifra ha la sua finestra (overflow hidden): quando cambia, la nuova arriva dall’alto se il tempo scende, dal basso se sale, e la vecchia se ne va dall’altra parte; un giro ancora in corso finisce subito, così le rotazioni veloci non si ammucchiano.
Il segno e lo squillo
Play e pausa sono due figure di quattro lati (le due metà del triangolo, le due barre) di cui si spostano gli angoli. Allo scadere il quadrante gira con dei keyframes di rotation per RING secondi, sedici raggi (linee) partono due volte allungandosi e sfumando, e le cifre lampeggiano (opacity in yoyo).
Tastiera e anteprima
La manopola è uno slider (role slider): le frecce di STEP, Pagina su e giù di un minuto, Inizio e Fine agli estremi, Invio o spazio fanno partire e fermare; una regione aria-live dice partito, in pausa, tempo scaduto. Un clic da script (l’anteprima della libreria) gira la manopola fino a pochi secondi e parte, poi sceglie un tè, parte, si ferma e ricomincia, e lascia stare un conto alla rovescia breve finché non ha suonato.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
MAX | script.js | 300 | I secondi di un giro intero del quadrante. |
STEP | script.js | 5 | Di quanti secondi si sposta la manopola. |
TEAS | script.js | [['Green tea', 120], ['Black tea', 240], ['Herbal', 300]] | I tè: nome e secondi. |
SPRING | script.js | [220, 0.8] | La molla dell’arco quando segue la mano o un tè: quanto è rigida e quanto è frenata. |
RING | script.js | 1.4 | I secondi in cui il quadrante suona allo scadere. |
Quando usarla
Per un timer da cucina o da tè, una pausa fra due serie in palestra, il tempo di lavoro e di riposo, un conto alla rovescia in un gioco o in un’offerta.
Sul telefono
Il quadrante prende fino all’82 per cento della larghezza e la manopola si gira col dito: sul quadrante la pagina non scorre (touch-action none) mentre la si gira.
Con il movimento ridotto
L’arco va subito dove deve, senza molla né giro, le cifre cambiano senza rotolare, il segno cambia di colpo; allo scadere il quadrante non trema e non lancia raggi: dice Ready e torna al tempo scelto.
Trappole
- Un arco SVG fatto di un solo comando A non disegna il cerchio intero (inizio e fine coincidono): quando l’arco è pieno si disegnano due mezzi archi.
- L’angolo di atan2 salta di un giro intero passando dalla cima: si usa la differenza dall’angolo precedente, corretta di un giro, e la mano si ferma agli estremi.
- Se GSAP muove un elemento (il cenno della manopola, con scale) anche la sua posizione deve passare da GSAP (x e y, qui con quickSetter): un transform scritto a mano e quello di GSAP si cancellano a vicenda.
- Pochi secondi su una scala di cinque minuti sono un arco quasi invisibile: partito, l’arco diventa la parte di tempo che resta e fa il giro intero.
Librerie
GSAP 3.15.0, Urbanist (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,4 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.
