Complete Code For Using An Icon Library To Make An Animated Effect.
<!DOCTYPE html> <html> <head> <title>How To Use An Icon Library To Make An Animated Effect</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> </head> <style> body { background: black; } #div1 { font-size: 48px; padding: 10px; } #div2 { font-size: 48px; padding: 10px; } #div3 { font-size: 48px; padding: 10px; } </style> <body> <div class="container"> <br/><br/> <div class="text-center"> <h1 id="color" style="color: white;">Icon Library To Make An Animated Effect</h1> </div> <div class="well"> <div id="div1" class="fa"></div> <div id="div2" class="fa"></div> <div id="div3" class="fa"></div> </div> </div> <script> function ratestar() { var a; a = document.getElementById("div3"); a.innerHTML = ""; setTimeout(function () { a.innerHTML = ""; }, 1000); setTimeout(function () { a.innerHTML = ""; }, 2000); } ratestar(); setInterval(ratestar, 3000); function chargebattery() { var a; a = document.getElementById("div1"); 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); function brakechain() { var a; a = document.getElementById("div2"); a.innerHTML = ""; setTimeout(function () { a.innerHTML = ""; }, 1000); } brakechain(); setInterval(brakechain, 2000); </script> </body> </html>