Lo scheletro del caricamento

Caricamento, Transizioni, TestoGSAPMediaPeso compresso: Demo 5,2 KBGSAP 28 KBGratisScarica lo zip

Una scheda profilo che si apre come uno scheletro di ossa grigie con un solo riflesso che le attraversa tutte; caricata, ogni osso diventa il suo pezzo dall’alto in basso: la copertina si scopre mentre salgono le colline, l’avatar si apre come un diaframma, le parole si svelano e i numeri contano.

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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The loading skeleton</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/hanken-grotesk@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the card: while it loads every piece is a grey bone, and one glint runs across all of them together. Loaded,
         each bone turns into its piece from the top down: the cover uncovers its hills, the avatar opens, the words
         are wiped in, the numbers count up and the button fills -->
    <div class="profile" data-profile>
      <article class="card is-loading" aria-busy="true" aria-label="Profile" data-card>
        <div class="card__cover bone" data-bone="cover">
          <svg class="card__hills" viewBox="0 0 360 132" preserveAspectRatio="none" aria-hidden="true">
            <rect width="360" height="132" fill="#ffe3cf"/>
            <path data-hill d="M0 70 C60 40 110 52 170 66 C230 80 290 44 360 58 V132 H0z" fill="#ffc6a6"/>
            <path data-hill d="M0 92 C70 70 130 84 190 92 C250 100 300 76 360 86 V132 H0z" fill="#f59b7a"/>
            <path data-hill d="M0 112 C80 96 150 106 220 112 C280 117 320 102 360 108 V132 H0z" fill="#d9715a"/>
          </svg>
        </div>
        <div class="card__body">
          <div class="card__row">
            <span class="card__avatar bone" data-bone="avatar"><span class="card__face" aria-hidden="true">EM</span></span>
            <button class="card__follow bone" type="button" data-bone="button"><span>Follow</span></button>
          </div>
          <h2 class="card__name"><span class="bone" data-bone>Elena Marchetti</span></h2>
          <p class="card__role"><span class="bone" data-bone>Illustrator in Bologna</span></p>
          <p class="card__bio">
            <span class="bone" data-bone>Draws maps of places that do not</span>
            <span class="bone" data-bone>exist yet. Ink, watercolour and far</span>
            <span class="bone" data-bone>too much tea.</span>
          </p>
          <dl class="card__stats">
            <div><dt class="bone" data-bone>Posts</dt><dd class="bone" data-bone data-count="128">128</dd></div>
            <div><dt class="bone" data-bone>Followers</dt><dd class="bone" data-bone data-count="14200" data-short>14.2k</dd></div>
            <div><dt class="bone" data-bone>Following</dt><dd class="bone" data-bone data-count="311">311</dd></div>
          </dl>
        </div>
      </article>
      <button class="reload" type="button" data-reload data-autoclic>
        <svg viewBox="0 0 24 24" aria-hidden="true" data-reload-icon><path d="M19.5 12a7.5 7.5 0 1 1-2.2-5.3M19.5 4.5v4.2h-4.2"/></svg>
        <span>Load again</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.

24 valori da cambiare

Apri il Playground

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 «Lo scheletro del caricamento» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco una scheda dagli angoli tondi, mentre si carica: al posto della copertina, dell’avatar tondo, del pulsante, di ogni riga di parole e dei numeri ci sono ossa grigio chiaro, e un riflesso le attraversa tutte insieme da sinistra a destra, come se fossero ritagliate dallo stesso foglio. Caricata, le ossa diventano i loro pezzi dall’alto in basso: la copertina si scopre da sinistra e le sue colline color pesca salgono una dopo l’altra, l’avatar con le iniziali EM si apre come un diaframma, compare il pulsante nero Follow, Elena Marchetti, Illustrator in Bologna e le tre righe della descrizione si svelano riga per riga, e i numeri 128, 14.2k e 311 contano da zero. Sotto la scheda, Load again fa girare la sua freccia, rimette in fretta le ossa da sinistra, il riflesso riparte e la scheda si carica di nuovo.

Come funziona

Un velo per ogni pezzo

Lo script mette un velo (un elemento i) dentro ogni pezzo segnato con data-bone. Le parole stanno in elementi inline-block, così il velo prende la loro larghezza, ed è un po’ più sottile della riga; sotto il velo le parole restano trasparenti finché non tocca a loro.

Un riflesso solo

Tutti i veli hanno lo stesso gradiente, largo il doppio della scheda, spostato di quanto il velo sta più a destra (--x) e di dove si trova il riflesso (--b): background-position è --b − --x − --cw. Un tween porta --b da una parte all’altra della scheda in SWEEP secondi, sempre di nuovo.

Dall’alto in basso

Caricata la scheda, le ossa si mettono in fila dall’alto e da sinistra, a STAGGER secondi l’una dall’altra: ogni velo si accorcia con scaleX verso destra in WIPE secondi, scoprendo il pezzo da sinistra. Le colline della copertina salgono una dopo l’altra, le parole scendono di 5 pixel al loro posto, il velo dell’avatar svanisce e il volto si apre con un clip-path a cerchio.

I numeri

Ogni numero tiene la larghezza della sua cifra finale (presa all’inizio come min-width), così il velo e la riga non si muovono mentre conta; il conteggio va da zero alla cifra con power3.out, e 14200 si scrive 14.2k.

Di nuovo

Load again rimette i veli da sinistra, uno ogni 0,025 secondi, fa ripartire il riflesso e dopo LOAD secondi scopre di nuovo la scheda. La scheda ha aria-busy mentre si carica, e una riga per gli screen reader dice quando è pronta.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`LOAD`	script.js	`1.6`	I secondi in cui si vedono le ossa prima che la scheda sia caricata.
`SWEEP`	script.js	`1.15`	I secondi che il riflesso impiega ad attraversare la scheda.
`WIPE`	script.js	`0.55`	I secondi in cui un osso diventa il suo pezzo.
`STAGGER`	script.js	`0.06`	I secondi fra un pezzo e il successivo, dall’alto in basso.

Provali nel Playground

Quando usarla

Per tutto quello che arriva da un server e si fa aspettare un attimo: profili, schede di prodotto, articoli, elenchi di risultati, cruscotti.

Sul telefono

La scheda prende la larghezza dello schermo meno un margine; ossa e riflesso si adattano da soli, perché lo script rimisura i veli quando la scheda cambia misura. Due tocchi veloci su Load again non ingrandiscono la pagina.

Con il movimento ridotto

Niente riflesso, niente colline che salgono né conteggi: le ossa restano ferme e, caricata la scheda, svaniscono tutte insieme lasciando i pezzi al loro posto.

Trappole

Un riflesso per ogni osso, ciascuno per conto suo, sarebbe sfasato: il gradiente è uno per tutti, largo il doppio della scheda, e ogni velo lo sposta di quanto sta più a destra; così la luce passa come una sola.
Le lettere hanno aste e code che escono dal riquadro della riga, e sotto un velo più sottile della riga spunterebbero: le parole restano trasparenti finché non tocca a loro.
Un numero che conta da zero cambia larghezza a ogni cifra: senza una larghezza minima presa dalla cifra finale, il velo e la riga ballerebbero.
L’avatar ha un bordo bianco che lo stacca dalla copertina: anche il suo velo ha lo stesso bordo, o l’osso tondo sembrerebbe più grande dell’avatar.
Un velo grande esattamente quanto il suo pezzo lascia passare sul bordo un filo del colore di sotto, per via dello smussato dei bordi: i veli della copertina e del pulsante sono più grandi di un pixel per lato.

Librerie

GSAP 3.15.0, Hanken Grotesk (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 5,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.