X
  • Дизайн и разработка сайта
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

Прогресс бар, индикатор прокрутки страницы

Приклад
  • 2022-07-03
  • 8580 переглядів

    1 коментар

  • Дизайн и разработка сайта

Доброго времени суток 🙂

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

Прогресс-бар

У многих сразу возникнет вопрос - Зачем?. Ведь по полосе прокрутки и так понятно. Бывает такое, что делается лендинг с разного рода эффектами, когда прокрутка специально скрывается с какими-то целями. С помощью такого вот прогресс-бара, посетитель увидит как идет процесс прокрутки. Вот так будет выглядеть простейший пример работы данного индикатора.



Пример

Прокручивая страницу вниз, вверху двигается полоса, показывая прогресс. Если Вас заинтересовал данный фокус или он нужен Вам по другим причинам, затягивать не буду приступим к его осуществлению.

Шаг №1

Как обычно со всем что использует - jQuery в начале нужно определиться с самой библиотекой. Если Вы подключали ее ранее на своем сайте, то этот шаг можно пропустить. В противном случаи Вам нужно в шапку перед закрывающимся head или в подвал перед закрывающимсяbody добавить вот такую строку:

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Шаг №2

Теперь сам скрипт, который поможет осуществить задумку. Он добавляется сразу после библиотеки, ну или в те же места куда и она, если Вы ее не добавляли.

    <script>
     $(function() {
         $(window).on("scroll resize", function() {
             var o = $(window).scrollTop() / ($(document).height() - $(window).height());
             $(".progress-bar").css({
                 "width": (100 * o | 0) + "%"
             });
             $('progress')[0].value = o;
         })
     });
  </script>

Также данный скрипт, без тегов - script можно прописать в отдельный, который добавить к сайту и подключить как библиотеку, указав лишь правильный путь.

Шаг №3

Теперь ход дошел к HTML разметке. В любое место, после открывающегося body в шапке или в подвале перед закрывающегося bodyДобавляем такую разметку:

<progress value="0">
   <div class="progress-container">
    <span class="progress-bar"></span>
  </div>
</progress>

Шаг №4

Последним и заключительным шагом в этой статье, будет добавление стилей, которые помогут корректно отобразить анимацию. Добавлять нужно в файл стилей где собраны стили CSS Вашего сайта. Часто этот файл называется style.css.

  progress{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:5px;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    border:none;
    background:transparent;
    color:#F00;
  }

  progress::-webkit-progress-bar{
    background:transparent;
    border-radius:5px;
  }

  progress::-webkit-progress-value{
    background:#F00;
    border-radius:5px;
  }
  progress::-moz-progress-bar{
    background:#F00;
    border-radius:5px;
  }
  .progress-container{
    width:100%;
    background:transparent;
    position:fixed;
    top:0;
    left:0;
    height:5px;
    display:block;
  }

  .progress-bar{
    background:#F00;
    width:0%;
    display:block;
    height:inherit;
  }

Как обычно, стили можно править под себя, если Вы разбираетесь в CSS и это не проблема для Вас. Если Ваши навыки не позволяют свободно и с легкостью править, то нужно аккуратно и с осторожностью. 🙂

Если Вам пригодился данный прогресс-бар, можете поделится в комментариях, где Вы его использовали.

На этом все, спасибо за внимание. 🙂

Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини :)

Хочу підтримати фінансово Хочу відключити блокувальник

Оцініть статтю
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 11, в среднем: 4.5 из 5
Читайте також
Опубликован 1 комментарий

Добавить комментарий

Чтобы оставить комментарий - заполните поля ниже. Ваш e-mail не будет опубликован. Все поля обязательны

Натисніть, щоб додати код в коментар. Далі додайте свій код всередину тегів <code> тут код </code>
Я ознайомлений(а) з політикою конфіденційності і даю згоду на обробку персональних даних*

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.