How To Use An Icon Library To Make An Animated Effect

admin_img Posted By Bajarangi soft , Posted On 27-11-2020

We can create animated icon using icon library .So today we create animation with fa icons .

How To Use An Icon Library To Make An Animated Effect

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 = "&#xf006;";
        setTimeout(function () {
            a.innerHTML = "&#xf123;";
        }, 1000);
        setTimeout(function () {
            a.innerHTML = "&#xf005;";
        }, 2000);
    }

    ratestar();
    setInterval(ratestar, 3000);

    function chargebattery() {
        var a;
        a = document.getElementById("div1");
        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);

    function brakechain() {
        var a;
        a = document.getElementById("div2");
        a.innerHTML = "&#xf0c1;";
        setTimeout(function () {
            a.innerHTML = "&#xf127;";
        }, 1000);
    }

    brakechain();
    setInterval(brakechain, 2000);
</script>
</body>
</html>

Related Post