Comment - Animer des icônes
Apprenez à utiliser des icônes pour créer un effet animé.
Batterie en charge
Étape 1) Ajoutez du HTML :
Exemple
<div id="charging" class="fa"></div>
Étape 2) Inclure la bibliothèque d'icônes Font Awesome :
Exemple
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
En savoir plus sur Font Awesome dans notre didacticiel Font Awesome .
Étape 3) Ajoutez un JavaScript :
Exemple
<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>
Exemple expliqué
L'exemple donne l'impression d'une batterie en cours de chargement, mais à la place, cinq icônes différentes sont affichées.
Une fonction appelée chargebattery()
fait tout le remplacement et l'affichage des icônes.
La fonction démarre en affichant une icône de batterie vide :
Au bout d'une seconde, l'icône est remplacée par une nouvelle icône :
L'icône est remplacée par une nouvelle icône chaque seconde, jusqu'à ce que "la batterie soit complètement chargée":
Ce processus est répété toutes les 5 secondes, ce qui donne l'impression que la batterie est en charge.
Plus d'icônes animées
Exemple
Exemple
Exemple
Exemple
Exemple
Exemple