Chat icon pure CSS

Chat icon

This chat icon animated can be used for loaders, for ChatApps, etc.

Let your imagination travel and don't worry about making an icon because it's already coming to use!

FREE TO USE!

<html>
    <head>
        <style>
            #body {
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:100%;
    position:fixed;
    
}

/*body {
    background-color:#FF9800;
}*/

#all {
    background-color:#202020;
    height:100px;
    width:140px;
    position:absolute;
    border-radius:20px 20px 20px 0px;
    margin-top:-50px;
}

#all:after{
    content:' ';
    background-color:transparent;
    height:0px;
    width:0px;
    position:absolute;
    bottom:-20px;
    border-left:15px solid #202020;
    width: 0;
    height: 0;
    border-left: 0px solid transparent;
    border-right: 55px solid transparent;
    border-top: 50px solid #202020;
}

.white {
    background-color:white;
    width:105px;
    position:absolute;
    bottom:75px;
    height:7px;
    margin-left:15px;
    border-radius:10px;
    animation:anim 4s infinite;
}

@keyframes anim {
    0%{
        width:1px;
    }
    to{}
    100%{}
}

.sec {
    bottom:50px;
    animation:anim 4s infinite;
    animation-delay:1s;
}

.third {
    bottom:25px;
    z-index:9;
    animation:anim 4s infinite;
    animation-delay:2s;
}

</style>
        <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Spartan:wght@300&display=swap" rel="stylesheet">
    </head>
    <body>
    <div id="body">
        <div id="all">
            <div class="white"></div>
            <div class="white sec"></div>
            <div class="white third"></div>
        </div>
    </div>
     </body>
</html>

CHAT ICON || CSS