Практика JavaScript. Задача #4. Делаем Progress bar

Всем привет. В данном видео мы с вами начинаем решать разные задачи на нативном JavaScript!
Учимся делать progress bar.
Практикум Javascript • Практикум Javascript
Не ограничивай себя видеоуроками на KZbin!
Узнавайте еще больше полезной информации!
👍👍👍Telegram-чат: t.me/frontcoder
Telegram-канал: t.me/frontcode...
VK: frontcoder
-----------------------------------------------------------------------------------
Не забываем, что самый лучший способ сказать "спасибо" - нажать кнопку "нравится" и скинуть ссылку на урок друзьям. Ничто другое так сильно не мотивирует автора продолжать работу :)

[@yankiiblimm6807]

ГОСПОДИ СПАСИБО 2 ЧАСА ИСКАЛА КАК ЭТУ ХРЕНЬ СДЕЛАТЬ ШИКАРНЫЙ УРОК, ОТ ДУШИ

[@МаксимРуднев-ы9ч]

быстро, понятно и эффективно, огромное спасибо

[@neptunin1]

Скажите пожалуйста, как его зациклить, то есть как сделать, чтобы после достижения 100 процентов, прогресс бар начинал автоматически с ноля?

[@трулав-у7б]

можно как то задать время, хочв чтобы дольше шла загрузка

[@almtg871]

А не знаешь как в андройд студио такое реализовать? Очень помог бы)

[@Frontcoder]

Увы не подскажу

[@МаксимТкаченко-ы7ъ]

Анатолий, а как подвязать к загрузке всего "сайта"?

[@batyatube]

Максим Ткаченко зависит от конкретной ситуации. Если известны все статик ресурсы - Грузим их лоадером самописным или stackoverflow.com/a/22319239/3439530

[@МаксимТкаченко-ы7ъ]

либо делаем инфинити прогресс-бар и не паримся?

[@ЮрийБондаренко-п7м]

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

[@Frontcoder]

так как написан код - я показал. Лучше взят и переписать его. Так запоминаемость гораздо лучше, чем просто в коде копаться. На большие проекты код выкладываю

[@ЮрийБондаренко-п7м]

@@Frontcoder ... я согласен, что код лучше своими пальцами переписать ... только переписать крайне трудно, потому, что на видео код виден очень мелко ... я даже пытался делать скриншоты фрагментов кода для последующего увеличения изображения, но тогда текст расплывается ... делайте пожалуйста покрупнее изображение кода ... заранее спасибо.

[@Frontcoder]

@@ЮрийБондаренко-п7м С этим прощения. Действительно на старых видео очень много мелкого кода. Поздно стал задумываться об этом. Сейчас стараюсь таких ошибок больше не допускать

[@TsA1ex]

А чего не css с анимацией?

[@Frontcoder]

Я показал лишь пример. Вариаций как его улучшить много. В том числе и css анимацией

[@TsA1ex]

FrontCoder нет. Не улучшить. Я имею ввиду, зачем он вообще на js? Если такое поведение реализуется на css. С помощью анимаций. А js можно только класс навешивать. Если же нужно конкретное значение прогресса, то вешается дата атрибут, который выставляется js-ом. А от него уже зависит ширина слайдера. Просто напрямую манипулировать стилями из js как то не очень

[@PavelOmelchenko]

А как этот прогрессбар узнает сколько осталось от процесса? Ну то есть расчет будет идти час, это прогрессбар не покажет реальных данных

[@TsA1ex]

Pavel Omelchenko выше ведь написал. el.dataset.attrName = progress. И всё. Стили в js не гуд. А что если прогресс будет вертикальным, или колечком на svg или столбиком из палочек. Придется js переписывать, так как там width

[@TsA1ex]

Pavel Omelchenko тот вариант что в видео также ничего не знает о прогрессе, а просто анимирует прогресс, что легко достигается средствами обычного css в одну строку. А если нужно анимировать по событию клика, вешаем класс js_ом и анимация запускается