How to Create: Animated Icons

Learn how to create animation effects with icons.

Battery Charging

Try It Yourself

Step 1 - Add HTML:

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

Step 2 - Include the Font Awesome icon library:

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

In our Font Awesome Tutorial for more information about Font Awesome.

Step 3 - Add 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>

Try It Yourself

Example explanation:

This example gives the impression that the battery is charging, but in fact, it displays five different icons.

A function named chargebattery() responsible for replacing and displaying all icons.

This function first displays an empty battery icon:

After one second, the icon is replaced by a new icon:

A new icon replaces the current icon every second until the battery is fully charged:

This process repeats every 5 seconds, giving the impression that the battery is charging.

More Animation Icons

Example

Try It Yourself

Example

Try It Yourself

Example

Try It Yourself

Example

Try It Yourself

Example

Try It Yourself

Example

Try It Yourself