Как сделать горизонтальный индикатор загрузки сайта как на YouTube?

Question

[vladislav997]

Подскажите, как сделать горизонтальный индикатор загрузки сайта? Пример когда кликаешь на видео на ютубе и там вверху красная линия типа прогружается слева-направо. Может кто знает готовые решения?

Answer 1

[origami1024]

Такой компонент называется ajax progress bar - для гугления.

Суть в том, что у ajax запроса есть ивент "progress", в параметрах которого приходят:

1. значение полного размера ответа (event.total)
   
2. и значение какая часть загруженна на текущий момент (event.loaded).
   

Эти два значения - всё что нужно, чтобы рисовать текущий прогресс

Пример реализации:

Comments

[vladislav997]

а почему урл ведёт на "/echo/html" ?

[origami1024]

vladislav997, а что тебя смущает в "/echo/html"?

[origami1024]

vladislav997, на ютубе когда кликаешь на видео этот прогресс идет при переходе по роутам внутри их SPA приложения через AJAX без перезагрузки всего сайта

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

[vladislav997]

origami1024, я ютуб как пример привёл

[origami1024]

vladislav997, ты запутывающий пример привел, потому что на ютубе эта полоска есть только на переходах по ajax-у

У тебя SPA приложение или классические странички?

Судя по тому что тебе не нравится предложенный мной вариант, классические странички. Тогда тебе нужно что-то типа такого:
https://origami1024.github.io/progress/
https://github.hubspot.com/pace/docs/welcome/
Но если ты поисследуешь эту тему, то скорее всего откажешься от подобного прогрессбара, потому что в браузере нет данных о прогрессе первоначальной загрузки, есть только события загрузки отдельных файлов.
Все подобные либы просто закрывают страницу сайта на ~0.5сек лоадером, и убирают лоадер примерно угадываная что загрузка закончилась.
Особенно изощренные либы используют во время загрузки уточнения по различным событиям загрузки файлов, но это не дает хорошей точности, потому что изначально нет информации сколько всего будет файлов, так как при подгрузке очередного скрипта обнаруживается что он хочет подгрузить еще скриптов или картинок и прогресс течет вниз