Accéder au contenu principal

Comment créer un spinner qui tourne, simplement avec ton téléphone ?

Date:


Tu as sûrement déjà vu ce petit cercle qui tourne quand une page charge sur Google, Facebook ou un site web. Ce petit effet visuel s’appelle un spinner, et il indique que quelque chose est en train de charger. Aujourd’hui, je vais te montrer comment créer un spinner qui tourne, simplement avec ton téléphone, sans avoir besoin d’un ordinateur.

🔧 Comment ça fonctionne ?

Un spinner est une animation créée avec du code HTML et CSS.

Le HTML sert à construire la structure (le cercle).

Le CSS sert à créer l’effet de rotation automatique.

C’est un bon exercice pour débuter en programmation, car il te permet d’apprendre les bases sans coder en JavaScript pour le moment.


🛠️ Le code complet du spinner

Voici un exemple de code que tu peux copier/coller dans une application comme "HTML Viewer" ou "Dcoder" (disponible sur le Play Store) : 

<!DOCTYPE html>
<html>
<head>
  <style>
    .spinner {
      width: 50px;
      height: 50px;
      border: 5px solid #f3f3f3;
      border-top: 5px solid #3498db;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin: 100px auto;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  </style>
</head>
<body>
  <div class="spinner"></div>
</body>
</html>
📌 Explication rapide :

.spinner crée un cercle.

border-top est coloré pour faire l’effet de rotation.

L’animation spin le fait tourner à l’infini.


✅ Comment le tester sur ton téléphone ?

Ouvre ton Play Store et télécharge HTML Viewer, Dcoder, ou une application similaire.

Ouvre l'application, colle le code ci-dessus dans l’éditeur HTML.

Appuie sur "Run" ou "Preview" pour voir ton spinner tourner 🎉


🚀 Conclusion

Avec juste HTML et CSS, tu peux déjà créer des animations incroyables depuis ton téléphone. Pas besoin de PC ! Apprendre le code est à la portée de tous. 👉 Si tu veux apprendre d'autres effets et astuces puissantes comme celle-ci, abonne-toi.

Commentaires

Enregistrer un commentaire