Awesome loading animation you have never seen it before.
Tags: html, css, beginners, webdev
Published: 2021-06-04 11:47:27

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

{% codepen https://codepen.io/kunaal_kumar/pen/jOBzpLG %}

#Video Tutorial -

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

{% youtube 9wZTyLLqZhc %}

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

#Let's code

Inside HTML file under `<body>` tag write

```HTML
<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.

```CSS
*{
    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
```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](https://github.com/kunaal438/loading-animation),[My youtube Channel](https://www.youtube.com/c/TechyProgrammers/), [Instagram](https://www.instagram.com/techy_programmers/)