Pull to Refresh
Une simulation de pull-to-refresh mobile sur un faux smartphone CSS : cliquez ou appuyez Espace pour déclencher la séquence d'indicateur + contenu qui se rafraîchit. Idéal pour documenter ou démontrer ce pattern d'interaction.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Hover comprend 48 effets, dont 5 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La racine .fx-0365-root (250 px de haut, fond rgb(26, 26, 36)) centre un maquette de téléphone CSS (.mi-pull-phone, 160×280 px, coins arrondis, fond sombre). Le téléphone contient un indicateur de rafraîchissement (.mi-pull-indicator) et une zone de contenu (.mi-pull-content) avec trois lignes de placeholder. L'indicateur démarre hors de l'écran (translateY négatif), la flèche SVG pointe vers le haut.
Le script est déclenché au clic sur le téléphone (ou par Espace / Entrée au clavier), ou par un glissé vers le bas d'au moins 70 px via les événements pointer. Il vérifie qu'aucune animation n'est en cours, puis enchaîne trois étapes via setTimeout : (1) ajout de .pulling — l'indicateur descend en vue avec translateY(0), la flèche tourne de 180°, le contenu se décale vers le bas ; (2) après 800 ms, suppression de .pulling et ajout de .refreshing — le spinner CSS remplace la flèche (rotation infinie) ; (3) après 1 500 ms, suppression de .refreshing, réinitialisation. La durée totale de la séquence est d'environ 2,3 s.
Le téléphone a tabindex="0", role="button" et aria-label="Simuler le rafraîchissement". La séquence est intentionnellement une démo cliquée, pas un vrai glissé de doigt depuis le haut de l'écran (le drag via mousedown + mousemove de l'original était limité au desktop uniquement). Ce point est dit honnêtement dans la fiche : pour un vrai pull-to-refresh tactile, il faut un composant React Native ou une bibliothèque native.
Accessibilité
- Clavier : le téléphone a
tabindex="0",role="button"etaria-label; Tab l'atteint, Espace ou Entrée déclenche la simulation. Le contour de focus (:focus-visible) apparaît à la navigation au clavier. - Mouvement réduit : sous
prefers-reduced-motion: reduce, toutes les transitions CSS (descente de l'indicateur, déplacement du contenu) et l'animation du spinner sont supprimées. La séquence d'états se joue quand même au clic, mais les changements sont instantanés. - Limitation tactile honnête : sur un vrai appareil mobile, l'effet répond au clic/toucher simple uniquement. Il ne simule pas un vrai geste de glissé vers le bas (drag). Ce composant est adapté à une démonstration ou un tutoriel ; pour un pull-to-refresh fonctionnel dans une appli mobile, utilisez un composant natif.
Compatibilité navigateur
CSS (transitions, animations spinner) + 0,7 Ko de JavaScript (classList, setTimeout, keydown), aucune dépendance. Vérifié dans Chromium 151 : séquence complète en 4 étapes, déclenchement par clic et par clavier, deux copies indépendantes, mouvement réduit sans animation, 0 erreur. Les captures d'aperçu montrent l'animation rejouée en boucle automatique par le code de scène : ce comportement n'est pas inclus dans le code vendu.
Sans JavaScript, le téléphone est affiché au repos sans interaction. Sans transitions CSS, les changements d'état sont instantanés sans animation.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0365-root">
<div class="mi-pull-scene">
<div>
<div class="mi-pull-phone" tabindex="0" role="button" aria-label="Tirer pour rafraîchir">
<div class="mi-pull-indicator">
<svg viewBox="0 0 24 24">
<path d="M12 19V5M5 12l7-7 7 7"></path>
</svg>
</div>
<div class="mi-pull-content">
<div class="mi-pull-item"></div>
<!-- répéter pour 4 autres éléments -->
</div>
</div>
<p class="mi-pull-hint">Tirez vers le bas, cliquez ou appuyez Espace</p>
</div>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Durées de la séquence (JS — valeurs des setTimeout) |
400 ms (pull), 1 200 ms (refresh), 500 ms (retour) | Allongez le délai de refresh (ex. 2 000 ms) pour une démo plus contemplative ; réduisez-le à 600 ms pour une démo rapide. |
Contenu du téléphone (HTML — .mi-pull-content) |
Trois lignes de placeholder CSS | Remplacez les divs par de vraies cartes, des lignes de texte simulées, des avatars colorés. Gardez les classes .mi-pull-item pour que les transitions s'appliquent correctement. |
Couleur de l'indicateur (CSS — stroke de .mi-pull-indicator svg et couleur du spinner) |
Bleu #818cf8 |
Changez en vert ou orange selon votre charte. Adaptez la couleur du spinner dans .mi-pull-indicator::after avec la même valeur de bordure. |
Label du bouton (HTML — aria-label sur .mi-pull-phone) |
Simuler le rafraîchissement | Adaptez à la langue et au contexte de votre page. Ce label est lu par les lecteurs d'écran et affiché dans l'indice visible au-dessus du téléphone. |
FAQ
pointerdown, pointermove, pointerup), compatibles souris et écran tactile. Tirez vers le bas jusqu'au seuil de 70 px pour déclencher la séquence. Un simple tap ou clic fonctionne aussi. Le clavier (Entrée ou Espace) déclenche également la séquence.setTimeout (après le retrait des classes) pour relancer la séquence automatiquement. Vérifiez d'abord prefers-reduced-motion avant de lancer une boucle..fx-0365-root est géré indépendamment par le script. Chaque téléphone a son propre état de séquence ; déclencher l'un n'affecte pas les autres.
