[web] горизонтальный progressbar аля YouTube

Да статья о библиотеке которая делают туже полосочку с YouTube уже была здесь, но мне не понравилось что нужно еще использовать и JQuery для нее это ужасно! (Извините если кого-то обидел, но в последнее время меня манит изобретать свои фигнюшки велосипеды)

Итак не буду томить и перейдем сразу к делу!

в html разметке создадим блок с id#progressbar-horizontal

<div id="progressbar-horizontal"></div>

добавим немного стилей

#progressbar-horizontal{
    height:2px;
    background-color:#f44d4d; 
    box-shadow:1px 1px 5px #f44d4d;
}

и приступим к моему быдло кодингу

  // Да как вы и поняли я люблю Андроид
    function findViewById(id){
        return document.getElementById(id);
    }

 // Итак будет функция где будем задавать максимальное значение, необходимое значение, время
    function progressBarHorizontal(max, current, duration){
        var view = findViewById("progressbar-horizontal"); // ищем наш блок
        var width = window.innerWidth; // ширина нашего окна
        var currentInWidth = width * ( (current / max)); // ширина нашего прогресса
        
        console.log(currentInWidth); //выводим это все в логи
        
        // теперь при ресайзе документа наш прогрессбар будет сохраняться =) 
        window.addEventListener("resize", function(){
            progressBarHorizontal(max, current, 0);
            console.log("resized to :" + width);
        }, false);
         
       // теперь это все в стили (я пока это запилил только для хрома, но пару лишних строчек вам не составит труда написать =) )               
        view.style.cssText = "width:"+currentInWidth+"px; -webkit-transition: all "+duration+"s linear;";
    }
    
    

    progressBarHorizontal(100, 50, 5); // вызываем и наслаждаемся))
}

Демо на Codepen