ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Полоса загрузки для сайта на CSS + JS

Полоса загрузки для сайта на CSS + JS

Простое решение по созданию линий прогресса для сайта, где при поднятии и спуску страницы появится линия вверху, где изменяется с прокруткой. Безусловно многие видели на браузере Яндекса прогресс линию, вот это почти не отличается, но разве своим оттенком, который можно формировать по своему желанию или как видите на сайте. Где также есть тема поставить на отдельную или созданную страницу, что оригинально получиться.

До этого был материал индикатор прокрутки страницы, где чем то они аналогичны по своим функциям. Это эта прокрутка очень простая и главное отлично работает. Где при желании можно самостоятельно сделать свое оформление. Который впишется в основной дизайн сайта, где больше материалу, тем больше она идет в своем появление. Если мало информации, то линия быстро пробежит, вообщем от размера контента еще зависит.

Так выглядит при проверки:

Установка:

HTML

Код

CSS

Код

#kemalson_evitaled {
  position: fixed;
  left: 0;
  top: 0;
  width: 0%;
  height: 3px;
  background: #5d5dbf;
}

Код

var line = document.getElementById('kemalson_evitaled');
window.addEventListener('scroll', progressBar);

function progressBar(e) {
  var windowScroll = document.body.scrollTop ||
  document.documentElement.scrollTop;
  var windowHeight = document.documentElement.scrollHeight -
  document.documentElement.clientHeight;
  var width_progress_line = windowScroll / windowHeight * 100;
  line.style.width = width_progress_line + '%';
}

Если разобрать, что означает Progress Bar, то это оригинальная линия прогресса, что идет под своей стилистикой, и безусловно начнет свое увеличение по мере прокрутки страницы.

Демонстрация

16 Июня 2019 Загрузок: 2 Просмотров: 3751 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0