Live Code Editor Version 2.0

Hướng dẫn tạo Animate Icon với CSS và Javascrip - Demo RUN

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <style type="text/css">
          .container {
            width: 90%;
            height: 700px;
            margin: auto;
            text-align: center;
          }
          #charging {
            font-size:48px;
          }
        </style>
    </head>
    <body> 
      <div class="container">
        <h2>Freetuts.net hướng dẫn tạo Animation icon</h2>

<div id="charging" class="fa">&#xf240;</div>
      </div>
    </body>
    <script>
      function chargebattery() {
        var a;
        a = document.getElementById("charging");
        a.innerHTML = "&#xf244;";
        setTimeout(function () {
            a.innerHTML = "&#xf243;";
          }, 1000);
        setTimeout(function () {
            a.innerHTML = "&#xf242;";
          }, 2000);
        setTimeout(function () {
            a.innerHTML = "&#xf241;";
          }, 3000);
        setTimeout(function () {
            a.innerHTML = "&#xf240;";
          }, 4000);
      }
      chargebattery();
      setInterval(chargebattery, 5000);
    </script>
</html>