Skip to main content

Animated Loading Text Effect Using HTML And CSS | Coding With Roannie

 Animated Loading Text Effect Using HTML And CSS


Source Code For Loading :


HTML CSS CODE 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading...</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet">
<style>
    body{
        margin0;
       padding0;
       font-family'Poppins',sans-serif;
       background-colorblack;
       displayflex;
       justify-contentcenter;
       align-itemscenter;
       min-height100vh;
       font-size4em;

    }
    h1{
        positionrelative;
        colorrgb(737272);
        /* -webkit-text-stroke: 3px #3e3e3e; */
    }
    h1::before{
        contentattr(data-text);
        positionabsolute;
        left0;
        top0;
        width0;
        height100%;
        border-radius8px 8px ;
        border-right:0px solid black ;
        animation: animate 3s linear infinite  ;
        -webkit-text-stroke0px #3e3e3e;
        overflowhidden;
        border-bottom10px solid rgb(737272) ;
    }
    @keyframes animate{
        0%{
            width0;
            colorrgb(0110255);
            border-bottom10px solid rgb(0110255);
        }
        100%{
            width100%;
            colorrgb(0110255);
            border-bottom10px solid rgb(0110255);
        }

    }
</style>
</head>
<body>
    <h1 data-text="LOADING...">LOADING...</h1>
</body>
</html>






This Code Animate Like this and You Can also Customize According To You :






Subscribe Us On YouTube

My YouTube Channel Link : Coding With Roannie


Thanks For Visiting