
Да статья о библиотеке которая делают туже полосочку с 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