• HTML
• CSS

HTML

<div class="container">
    <h2>Loading...</h2>
    <div class="loader"></div>
    <span></span>
</div>

CSS

*{
    margin:0;
    padding:0;
    font-family:sans-serif;
}
body{
    background:rgb(1,1,17);
}
h2{
    color:white;
    text-align:center;
    font-size:33px;
    letter-spacing:2px;
}
.container{
    width:100%;
    position:absolute;
    top:50vh;
    left:50vw;
    transform:translate(-50%,-50%);
}
.loader,span{
    height:15px;
    position:relative;
    border-radius:10px;
    margin:20px;
    left:28%;
}
.loader{
    width:0%;
    background:rgb(62,246,250);
    box-shadow:0px 0px 20px blue;
    animation:animate 10s forwards;
}
@keyframes animate{
    from{
        width:0%;
    }
    to{
        width:40%;
    }
}
span{
    top:-36.4px;
    width:40%;
    background:rgb(62,72,95);
    border:1.5px solid rgb(2,58,66);
    display:block;
    z-index:-1;
}

/*
    All the credits to: https://www.youtube.com/watch?v=HBD1R4iYXDc&list=PLhcVM7vohPpEhvGp-4tY81WKeQPQt9ClT
*/