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


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

Пример доступен здесь.
UPD: Пример больше не работает, смотрите на YouTube


HTML

HTML код будет добавляться на страничку динамически, и заниматься этим будет JQuery. Поэтому пока лишь просто приведу код, который никуда вставлять не надо!
<div id='progress'></div>


CSS

Давайте придадим красоты нашему прогресс бару! Вот css свойства, которые мне понравились. Вы всегда можете из изменить и добавить, например, тень: смотреться будет неплохо.
#progress {position: fixed;
    z-index: 100;
    top: 0;
    left: -6px;
    width: 1%;
    height: 3px;
    background: rgb(198, 206, 22);
    border-radius: 1px;   
    transition: width 500ms ease-out,opacity 400ms linear;
}

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

JavaScript с JQuery

Это самая ответственная часть нашего элемента. Приведу код, поясню:
$(function() {
        $("body").append($("<div></div>").attr("id", "progress"));
        $("#progress").width((50 + Math.random() * 30) + "%");
});
$(window).load(function() {
    $("#progress").width("101%").delay(300).fadeOut(400);
});

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


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

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

P.S. Специально написал для разрабатываемого startapper'а. Пример доступен там же.
UPD: Пример больше не работает, смотрите на YouTube

0 комментариев

Жаль, но чтобы добавить комментарий, нужно зарегистрироваться.