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

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

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

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


Название: Прогресс бар загрузки страницы
Тип скрипта: 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);
})
Другие новости по теме:
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.