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

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

Плагины и Шаблоны для Wordpress
  • 2019-11-18
  • 4853 просмотр

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

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

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

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

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

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



Пример

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

Шаг №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
Читайте также
Комментариев нет. Оставьте первый

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

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

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

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