Кодинг
★ Рубрика: Кодинг
★ Тема: Javascript

Бегущая полоса - индикатор загрузки страницы

Когда вы открываете новую страницу нашего сайта, то в самом верху видите бегущую зеленую полоску, показывающую прогресс загрузки всех элементов страницы. Удобно, если у вас интернет медленный и вам надо дождаться когда загрузится все на странице. Для веб-разработчика тоже полезный элемент - посетитель видит, что до загрузки страницы осталось совсем немного и не уходит а следит за полоской и ждет пока все загрузится. Приводим стиль для полоски:
#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;
}
И код скрипта, добавляющего контейнер div в верхнюю часть страницы (сразу после body)^
$(function() {
 $("body").append($("
").attr("id", "progress")); $("#progress").width((50 + Math.random() * 30) + "%"); }); $(window).load(function() { $("#progress").width("101%").delay(300).fadeOut(400); });
 Похожие публикации: Javascript

Войдите, чтобы добавить Ваш ответ. [ Регистрация | Вход ]