X
Заказать услугу

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

Плагины и Шаблоны для Wordpress
  • 2020-11-27
  • 6710 просмотр

    1 комментарий

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

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

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

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

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



Пример

Плагины и Шаблоны для WordPress

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

Шаг №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
Проголосовало: 9, в среднем: 4.4 из 5
Читайте также
Опубликован 1 комментарий

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

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

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

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