Create Awesome Animated Widget Cards Using CSS, HTML, JQuery

In this video, you are going to learn how to create awesome animated widget cards using HTML, CSS, JQuery that can be used to display data and information in an attractive way. You can use these widget cards for dashboard websites and admin panels to display important data. Lets see how to create these animated widget cards.

Subscribe: https://www.youtube.com/channel/UCNDmzGYwwT3rdY3xQuW8QOA

Source code

index.html


<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>

        <title>Awesome Widget</title>
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pixeden-stroke-7-icon@1.2.3/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css">
        <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    </head>
    <body>

        <!--Widget Start-->
        <div class="card-body color1">
            <div class="float-left">
                <h3>
                    <span class="currency">$</span>
                    <span class="count">20000</span>
                </h3>
                <p>Revenue</p>
            </div>
            <div class="float-right">
                <i class="pe-7s-cart"></i>
            </div>
        </div>
        <!--Widget End-->
        <!--Widget Start-->
        <div class="card-body color2">
            <div class="float-left">
                <h3>
                    <span class="count">345</span>
                </h3>
                <p>Clients</p>
            </div>
            <div class="float-right">
                <i class="pe-7s-users"></i>
            </div>
        </div>
        <!--Widget End-->
        <!--Widget Start-->
        <div class="card-body color3">
            <div class="float-left">
                <h3>
                    <span class="count">4365</span>
                </h3>
                <p>Templates</p>
            </div>
            <div class="float-right">
                <i class="pe-7s-browser"></i>
            </div>
        </div>
        <!--Widget End-->

        <script type="text/javascript">
        $('.count').each(function(){
            $(this).prop('Counter',0).animate({
                Counter: $(this).text()
            }, {
                duration:4000,
                easing:'swing',
                step: function(now){
                    $(this).text(Math.ceil(now));
                }
            });
        });
        </script>

    </body>
</html>

style.css


body{
    margin: 0;
    padding: 0;
    height: 100vh;
    justify-content: center;
    align-items: center;
    display: flex;
}
/*widget css*/
.color1{
    background: #00C292;
}
.color2{
    background: #03A9F3;
}
.color3{
    background: #FB7146;
}
.card-body{
    display: inline-block;
    font-family: "Roboto", sans-serif;
    margin: 10px;
    padding: 20px;
    width: 250px;
    height: 90px;
    color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
.float-left{
    float: left;
}
.float-right{
    float: right;
}
.card-body h3{
    margin-top: 15px;
    margin-bottom: 5px;
}
.currency, .count{
    font-size: 30px;
    font-weight: 500;
}
.card-body p{
    font-size: 16px;
    margin-top: 0;
}
.card-body i{
    font-size: 95px;
    opacity: 0.5;
}

#html #css