Hello, glad you are here. I am kunaal and today we will see how to make an awesome loading animation which you have never seen before. You can see demo below.

Demo

Video Tutorial -

If you find this article hard or for better explanation. You can watch video tutorial.

If you like the video tutorial. Please consider subscribing my youtube channel.

Let's code

Inside HTML file under <body> tag write

<div class="loading-container">
    <div class="shutter top">
        <h1 class="loading-text"></h1>
    </div>
    <div class="shutter bottom">
        <h1 class="loading-text"></h1>
    </div>
</div>

<header class="landing-page">

</header>

And add some styles too.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --loading-text-size: 12vw;
}

body{
    width: 100%;
    height: 100vh;
    position: relative;
    font-family: 'roboto', sans-serif;
}

.landing-page{
    position: relative;
    width: 100%;
    height: 100%;
    background: url(bg.jpeg);
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

.loading-container{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 99;
}

.shutter{
    position: relative;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: #0a0a0a;
    overflow: hidden;
}

.shutter.top{
    top: 0;
    animation: slide-top 5s 4s forwards 1;
}

.shutter.bottom{
    bottom: 0;
    animation: slide-bottom 5s 4s forwards 1;
}

.loading-text{
    position: absolute;
    text-transform: uppercase;
    background: url(bg.jpeg);
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    color: #fff;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: var(--loading-text-size);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.top .loading-text{
    padding-top: calc(50vh - var(--loading-text-size)/ 1.6);
}

.bottom .loading-text{
    margin-top: calc(-1 * var(--loading-text-size)/ 1.6);
    height: calc(100% + var(--loading-text-size)/ 1.6);
}

@keyframes slide-top{
    100%{
        top: -100%;
    }
}

@keyframes slide-bottom{
    100%{
        bottom: -100%;
    }
}

/* media query */

@media (max-width: 996px){
    :root{
        --loading-text-size: 130px;
    }
}

@media (max-width: 750px){
    :root{
        --loading-text-size: 100px;
    }
}

@media (max-width: 500px){
    :root{
        --loading-text-size: 80px;
    }
}

At last add JS

const loadingText = [...document.querySelectorAll('.loading-text')];

let text = 'loading';

for(let i = 0; i < text.length; i++){
    setTimeout(() => {
        loadingText[0].innerHTML += text[i];
        loadingText[1].innerHTML += text[i];
    }, 500 * i);
}

Done. The animation is done. If you want to understand it more clear make sure to checkout tutorial video.

I hope you understood everything. If you have any doubt or you find any mistake that I made or you have any suggestion feel free to ask me in comment.

If you are interested in programming and want to know how I a 15yr old teen do coding make these design. You can follow me on my Instagram. I am also planning to post my game development stuff on Instagram.

Source Code,My youtube Channel, Instagram

Blog

Awesome loading animation you have never seen it before.

Modern Web

Demo

Video Tutorial -

Let's code

Join Our Newsletter. No Spam, Only the good stuff.

Related