Comment créer : icônes animées

Apprendre à utiliser des icônes pour créer des effets d'animation.

Recharge de la batterie

Essayez-le vous-même

Étape 1 - Ajouter HTML :

<div id="charging" class="fa"></div>

Étape 2 - Inclure la bibliothèque d'icônes Font Awesome :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Dans notre Tutoriel de Font Awesome Pour plus d'informations sur Font Awesome.

Étape 3 - Ajouter JavaScript :

<script>
function chargebattery() {
  var a;
  a = document.getElementById("charging");
  a.innerHTML = "";
  setTimeout(function () {
    a.innerHTML = "";
  }, 1000);
  setTimeout(function () {
    a.innerHTML = "";
  }, 2000);
  setTimeout(function () {
    a.innerHTML = "";
  }, 3000);
  setTimeout(function () {
    a.innerHTML = "";
  }, 4000);
}
chargebattery();
setInterval(chargebattery, 5000);
</script>

Essayez-le vous-même

Explication de l'exemple :

L'impression que l'on retient de cet exemple est que la batterie est en train de se charger, mais en réalité, il s'agit de cinq icônes différentes.

Un nom appelé chargebattery() La fonction est responsable de la substitution et de l'affichage de toutes les icônes.

Cette fonction affiche d'abord une icône de batterie vide :

Après une seconde, l'icône est remplacée par une nouvelle icône :

Un nouvel icône remplace l'icône actuelle chaque seconde jusqu'à ce que "la batterie soit complètement chargée":

Ce processus se répète toutes les 5 secondes, ce qui donne l'impression que la batterie est en train de se charger.

Plus d'icônes animées

Exemple

Essayez-le vous-même

Exemple

Essayez-le vous-même

Exemple

Essayez-le vous-même

Exemple

Essayez-le vous-même

Exemple

Essayez-le vous-même

Exemple

Essayez-le vous-même