Syntax error How to use icons to make an animated effect with JavaScript?

How to use icons to make an animated effect with JavaScript?

To use icons to make animated effect, the code is as follows −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
   #user {
      font-size: 60px;
      color:rgb(106, 33, 201);
   }
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      padding: 20px;
   }
</style>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<body>
<h1>Animating Icon example</h1>
<div id="user" class="fa"></div>
<script>
   function userShift() {
      var userEle;
      userEle = document.getElementById("user");
      userEle.innerHTML = "?";
      setTimeout(function() {
         userEle.innerHTML = "?";
      }, 1000);
      setTimeout(function() {
         userEle.innerHTML = "?";
      }, 2000);
   }
   userShift();
   setInterval(userShift, 4000);
</script>
</body>
</html>

Output

The above code will produce the following output −

Updated on: 2020-05-12T10:45:00+05:30

349 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements