Как данному прелодеру добавить проценты и линию загрузки

window.onload = function() {
        let preloader = document.getElementById('preloader');
        preloader.classList.add('hide-preloader');
        setInterval(function() {
              preloader.classList.add('preloader-hidden');
        }, 999);
        }

#preloader.hide-preloader {
    animation: hidePreloader 1s;
    }

#preloader.preloader-hidden {
    display: none;
}

@keyframes hidePreloader {
    0% {
        opacity: 1;
    }
  50{
        opacity: 0.5;
    }
    100% {
        opacity: 0.3;
    }
}
#preloader {
  z-index:99999999;
        min-height: calc(106vh - 50px);
    background: #0e1e6c;
    position:absolut;
    top:0;
    bottom:0;
    left:0;
    right:0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
}

<div id='preloader'>
        <img src="https://www.site.ru/laodi.gif" alt="preloader">
    </div>