How TO - Animate Icons
Learn how to use icons to make an animated effect.
Battery Charging
Try it Yourself »
Step 1) Add HTML:
Example
<div id="charging" class="fa"></div>
Step 2) Include the Font Awesome Icon Library:
Example
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Read more about Font Awesome in our Font Awesome Tutorial.
Step 3) Add a JavaScript:
Example
<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>
Try it Yourself »
Example Explained
The example gives an impression of a battery getting charged, but instead it is five different icons being displayed.
A function called chargebattery() does all
the replacing and displaying of icons.
The function starts by displaying an empty battery icon:
After one second, the icon is replaced by a new icon:
The icon is replaced by a new icon each second, until "the battery is fully charged":
This process is repeated every 5 second, making it seems like the battery is charging.
