Прогресс бар загрузки страницы [JS]

Robot 2014.04.20 Все для веб-мастера 2498

Название: Прогресс бар загрузки страницы
Тип скрипта: JS

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

Установка:
1) В любой .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;
}

2) На главной странице вашего сайта, перед тегом вставить
JQuery:

<script>
    $(function() {
        $("body").append($("<div></div>").attr("id", "progress"));
        $("#progress").width((50 + Math.random() * 30) + "%");
});
$(window).load(function() {
    $("#progress").width("101%").delay(300).fadeOut(400);
})

Вернуться

Другие новости по теме:

Добавление картинок и файлов в новость (v4.03)

Статистика рейтинга новости для dle 10-10.1

Убираем "Обновить, если не виден код" [DLE 9.x - 10.x]

Bars-Rating [DLE 9.7 - 10.1]

Убираем "Обновить, если не виден код" средствами CSS [DLE All]

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Блог вебмастера » Все для веб-мастера » Прогресс бар загрузки страницы [JS]

Прогресс бар загрузки страницы [JS]

Все для веб-мастера

Контактная информация