#preloader {
    width:100%;
    height:100%;
    position: fixed;
    top:0;
    background-color: rgb(255, 255, 255);
    z-index:100;
    transition:0.5s;
    text-align:center;
    overflow: hidden;
}

#preloader img {
    width:80%;
}

#preloader div {
    position: relative;
    margin: auto;
    top: 70%;
    width: 100px;
    transform: translateY(-50%);
    overflow: hidden;

}

#preloader div>div {
    margin:30px 0;
    height:5px;
    background-color: rgb(224, 224, 224);
    position: relative;
    overflow: hidden;
    border-radius: 99px;
}

#preloader div>div>span {
    position:absolute;
    top:0px;
    left: 0;
    width:0px;
    height: 5px;
    background-color:#007ebe;

    animation: loading 20s ease-in-out;
}
    


@keyframes loading {

    0% {
        width:0px;
    }

    12% {
        width:50%;
    }

    25% {
        width:80%;
    }

    37% {
        width:95%;
    }

    50% {
        width:100%;
    }

    80% {
        width:101%;
    }

    90% {
        width:95%;
    }

    100% {
        width:100%;
    }
}