Мануалы

Прогресс бар как на YouTube без плагинов

Добрый день, дорогие друзья! Сегодня я хочу показать свой небольшой код, который создает прогресс бар загрузки страницы вверху. Точно такой же эффект мы можем увидеть на YouTube, и он отлично там смотрится. Будем использовать HTML, CSS и библиотеку JQuery.
Пример больше не работает, смотрите на YouTube

HTML

HTML код будет добавляться на страничку динамически, и заниматься этим будет JQuery. Поэтому пока лишь просто приведу код, который никуда вставлять не надо!

CSS

Давайте придадим красоты нашему прогресс бару! Вот css свойства, которые мне понравились. Вы всегда можете из изменить и добавить, например, тень: смотреться будет неплохо.

Используется наш любимый зеленый цвет 🙂

JavaScript с JQuery

Это самая ответственная часть нашего элемента. Приведу код, поясню:

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

Событие $(window).load(function() запустится только после полной загрузки страницы. Тут мы постепенно обесцвечиваем прогресс бар и он исчезает.

На этом все. Попробуйте применить этот код для своего сайта — получится очень модно и удобно!

P.S. Специально написал для разрабатываемого startapper’а.

НА СЛЕДУЮЩЕЙ СТРАНИЦЕ БОЛЬШЕ ИНФОРМАЦИИ