Индикатор прогресса чтения. Разметка
Данная статья является продолжением предыдущей статьи, в которой мы говорили о том, как реализовать индикатор позиции чтения. В прошлой статье мы рассмотрели только теоретическую часть задачи, поэтому в данной статье мы реализуем ее техническую сторону. Итак, поехали.
Для начала взглянем на разметку:
<progress value="0"></progress>
Крайне важно, явным образом определить атрибут value. В противном случае, индикатор прогресса будет в неопределенном состоянии, для которого нам будет необходимо определить CSS стили, а мы этого не хотим. Пользователь начинает чтение контента сверху, начальное значение, установленное в разметке для атрибута value, является нулем. Значением по умолчанию для атрибута max является 1.
Для определения правильного значения для атрибута max, нам необходимо вычесть высоту окна из высоты документа. Сделать это можно только через JavaScript, но об этом чуть позже.
Место, в котором будет размещаться тег progress, в наибольшей степени будет зависеть от разметки вашей странички. Обычно, если на странице нет каких-либо фиксированных элементов-контейнеров, то можно расположить тег progress сразу после открывающего тега body.
<body>
<progress value="0"></progress>
<!--------------------------------
Весь остальной код страницы
--------------------------------->
</body>
Стилизация индикатора
Так как, нам нужно, чтобы индикатор чтения всегда находился наверху страницы, даже когда пользователь перематывает ее, мы дадим индикатору фиксированную позицию. Дополнительно, необходимо, чтобы задний фон индикатора был прозрачным, для того чтобы пустой индикатор не создавал бы помехи. Прозрачный фон также поможет нам в том случае, если JavaScript отключен.
progress {
/* Позиционирование */
position: fixed;
left: 0;
top: 0;
/* Размеры */
width: 100%;
height: 5px;
/* скрываем индикатор */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* избавляемся от границ */
border: none;
/* прозрачный фон */
background-color: transparent;
/* цвет индикатора */
color: red;
}
Для Blink/Webkit/Firefox нам необходимо использовать вендорские псевдо элементы для стилизации значения внутри индикатора. Следующий код будет использоваться для добавления цвета.
progress::-webkit-progress-bar {
background-color: transparent;
}
progress::-webkit-progress-value {
background-color: red;
}
progress::-moz-progress-bar {
background-color: red;
}
Итак, в этой небольшой статье о индикаторе прогресса чтения мы рассмотрели базовую разметку, а в следующей статье мы разберем как утроен JavaScript код данного индикатора.
-
Создано 04.10.2018 10:39:14
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.