Главная
Web-дизайн
Прогресс бар, индикатор прокрутки страницы

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

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

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

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

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



Пример

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

Шаг №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
(7 голосов, в среднем: 4.9 из 5)

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

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий