• HTML
• CSS

HTML

<div class="loading_container">
    <div class="loading-cont">
        <div class="loading_circle"></div>
        <p>loading...</p>
    </div>
</div>

CSS

*{
    margin:0;
    padding:0;
}
.loading_container{
    position:fixed;
    width:100%;
    height:100vh;
    background-color:#262626;
    display:flex;
    justify-content:center;
    align-items:center;
}
.loading-cont{
    width:160px;
    height:170px;
    background-color:#101010;
    border-radius:20px;
    display:flex;
    justify-content:center;
    align-items:center;
}
.loading_circle{
    position:absolute;
    width:50px;
    height:50px;
    border-radius:50%;
    border:3px solid #2fb;
    border-left:3px solid transparent;
    animation:loadanim 1s infinite linear;
}
@keyframes loadanim{
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(360deg);
    }
}
.loading-cont p{
    margin-top:120px;
    font-family:'Franklin Gothic Medium','Arial Narrow',Arial,sans-serif;
    font-size:20px;
    color:#c4c4c4;
}

/* All credits to: https://www.youtube.com/watch?v=TN-pcyN1ZAc */