<div class="container">
        <div class="loading-container">
            <div class="loading-line-container">
                <span class="loading-percent">100%</span>
                <div class="loading-line startLoading"></div>
            </div>
        </div>
    </div>

@mixin centerItems {
    display: flex;
    justify-content: center;
    align-items: center;
}

html,
body,
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    user-select: none;
}

body {
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    background-color: #252629;
    position: fixed;
}

.container {
    width: 100%;
    min-height: 100vh;
    @include centerItems();
}

.loading-container {
    width: 100%;
    height: auto;
    @include centerItems();
    .loading-line-container {
        @include centerItems();
        justify-content: flex-start;
        box-sizing: content-box;
        transition: box-shadow .5s;
        padding: 2px;
        position: relative;
        width: 40%;
        height: 20px;
        border: 2px solid rgba(32, 186, 230, .5);
        border-radius: 20px;
        @media screen and (max-width: 1500px) {
            width: 45%;
        }
        @media screen and (max-width: 1000px) {
            width: 60%;
        }
        @media screen and (max-width: 500px) {
            width: 70%;
        }
        @media screen and (max-width: 350px) {
            width: 80%;
        }
    }
}

.loading-percent {
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    z-index: 999;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: .9rem;
    opacity: .9;
}

.loading-line {
    width: 100%;
    height: inherit;
    border-radius: inherit;
    background-image: linear-gradient(135deg, rgb(32, 186, 230), rgb(110, 6, 173));
    opacity: .8;
}

@keyframes startLoading {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

.startLoading {
    animation-name: startLoading;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-duration: 4s;
    animation-timing-function: cubic-bezier(0, 0, 0, 0);
}

const loadingPercent = document.querySelector(".loading-percent");
const loadingLineContainer = document.querySelector(".loading-line-container");

var percent = 0;
var loop = setInterval(() => {
    if (percent != 100) {
        percent++;
        loadingPercent.innerText = `${percent}%`;
    } else {
        clearInterval(loop)
        loadingLineContainer.style.boxShadow = "0px 0px 2px 3px rgba(25, 135, 84, .5)"
        loadingLineContainer.style.borderColor = "rgba(25, 135, 84, .5)";
        loadingPercent.innerText = `Done !`;
    }
}, 40)