Создание прогресс бара при помощи элементов before и after [закрыт]
Закрыт. Этот вопрос не по теме. Ответы на него в данный момент не принимаются.
Вопросы с просьбами помочь с отладкой («почему этот код не работает?») должны включать желаемое поведение, конкретную проблему или ошибку и минимальный код для её воспроизведения прямо в вопросе. Вопросы без явного описания проблемы бесполезны для остальных посетителей. См. Как создать минимальный, самодостаточный и воспроизводимый пример.
Закрыт 3 года назад .
Как сделать прогрессбар как на скриншоте при помощи элементов before и after?
: Элемент индикатора выполнения
**HTML-элемент **отображает индикатор, показывающий ход выполнения задачи, обычно отображаемый в виде прогресс бара (индикатора выполнения).
Интерактивный пример
| Категории контента | Потоковый контент, фразовый контент, контент, ассоциированный с label, явный контент. |
|---|---|
| Допустимый контент | Фразовый контент, но среди его потомков не должно быть элемента . |
| Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
| Допустимые родители | Любой элемент, который принимает фразовый контент. |
| Допустимые ARIA-роли | Нет |
| DOM-интерфейс | HTMLProgressElement (en-US) |
Атрибуты
Этот элемент включает в себя глобальные атрибуты.
Этот атрибут описывает сколько затрат требует задача, указанная элементом progress . Атрибут max , в случае указания, должен быть положительным, также, возможно применение числа с плавающей точкой. Значение по умолчанию 1.
Этот атрибут указывает какая часть задачи была выполнена. Это может быть число с плавающей точкой от 0 до max , или между 0 и 1, если max не указан. Если атрибут value не указан, индикатор выполнения не определён; это указывает на то, что действие продолжается без указания на то, сколько времени оно займёт.
Примечание: Минимальное значение всегда 0, а атрибут min недопустим для прогресс-элемента. Вы можете использовать свойство CSS -moz-orient (en-US), чтобы указать, должен ли индикатор выполнения отображаться горизонтально (по умолчанию) или вертикально.
Примечание: Псевдокласс :indeterminate может быть использован для работы с неопределённым индикатором выполнения. Чтобы индикатор выполнения стал неопределённым после присвоения ему значения, вы должны удалить атрибут value с помощью element.removeAttribute(«value»)
Примеры
progress value="70" max="100">70 %progress>
Прогресс бар на чистом CSS3
Верстка
Автор Алексей На чтение 3 мин Просмотров 10.2к. Опубликовано 20.12.2018 Обновлено 09.01.2021
Сегодня речь пойдет о том как при помощи CSS3 сделать различные красивые прогресс бары ( Progress Bars) .
В рамках данного урока мы сделаем несколько прогресс баров. Они выглядят так:
ПОСМОТРЕТЬ ДЕМО СКАЧАТЬ ИСХОДНИКИ
Они не используют изображения, только HTML и CSS3.
HTML разметка
Сам бар будет с классом progressbar. Внутри него есть «заполнение» область индикатора выполнения. Это установлено со встроенным стилем. Это разметка, которая будет знать, как далеко заполнить индикатор выполнения, так что это тот случай, когда встроенные стили имеют смысл.
Основные CSS стили
Оболочка div — это трек индикатора выполнения. Мы не будем устанавливать ширину, поэтому она будет растягиваться так же широко, как и ее родитель, как это делает элемент уровня блока. Вы могли бы хотя. Высота тоже произвольная. Здесь он установлен на 20 пикселей, но может быть любым.
.progressbar
Тогда промежуток внутри будет заполнять часть индикатора выполнения. Мы сделаем так, чтобы он отображался в виде блока с высотой 100%, поэтому он растягивается, чтобы соответствовать любой комнате, в которой он находится. Затем мы будем использовать связку CSS3, чтобы придать ей градиентный вид.
.progressbar > span
Получаем типовой прогресс бар
Добавляем другие цвета
Давайте сделаем так, чтобы как можно проще изменить цвет. Просто добавьте имя класса «оранжевый» или «красный» в оболочку div, и цвет переопределится.
.orange > span background-color: #f1a165; background-image: linear-gradient(to bottom, #f1a165, #f36d0a); > .red > span background-color: #f0a3a3; background-image: linear-gradient(to bottom, #f0a3a3, #f42323); >Ну и добавим дополнительные прогресс бары
Таким образом вы можете как угодно раскрашивать их.
Делаем полосатый эффект
Мы можем получить крутой полосатый эффект, добавив еще один элемент поверх этого диапазона и наложив на него повторный CSS3-градиент. Семантически это лучше всего достигается с помощью псевдоэлемента, поэтому давайте сделаем это таким образом. Мы собираемся абсолютно точно позиционировать его в точной области пролета (которая уже имеет относительное расположение).
.progressbar > span:after
Анимируем полоски (придаем им движение)
Для этого, давайте в css следующий код.
@keyframes move < 0% < background-position: 0 0; >100% < background-position: 50px 50px; >>
Создание и оформление прогресс бара с помощью CSS3 и HTML5
Полоса загрузки, состояние загрузки или как его называют — прогресс бар или статус бар. Он может применяться при опросах, при построении графиков, при тех же опросах. В качестве индикатора загрузки страницы, а также в качестве завершенности какой-нибудь операции в процентах. В HTML5 есть специальный тег, который облегчает работу с прогресс баром. А также с помощью CSS3 не составит сложности его оформить по собственному желанию. И в нашем случае нет необходимости использовать изображения, что, несомненно, является большим плюсом. Реальный пример прогресс бара можно увидеть здесь:
Посмотреть примерСкачать
HTML5 часть — Создание и оформление прогресс бара
В HTML5 присутствует тег , который значительно облегчает нам работу с прогресс баром. Он имеет атрибут min, max и value. Чтобы он появился на странице, необходимо написать следующее:
value="5" max="100">/progress>
Когда вы вставите вышеприведенный код в HTML, то увидите прогресс бар, который отображается по умолчанию и с базовыми стилями. Если вы пользовались различными операционными система, то могли заметить, что прогресс бары в них отличаются.
CSS3 часть
А сейчас присвоим собственные стили нашему прогресс бару. В качестве селектора в CSS файле мы будем использовать сам тег progress:
1 2 3 4 5 6 7
progress { background-color: #f3f3f3; border: 0; width: 80%; height: 18px; border-radius: 9px; }
Вот, к примеру, вышеприведенный код убирает границу у прогресс бара и фон делает серым.
Для разных браузеров разные селекторы
Дело в том, что чтобы правильно отображался прогресс бар в разных браузерах, необходимо использовать псевдо-селекторы, предназначенные специально для конкретного браузера. Для Safari и Chrome:
1 2 3 4 5 6 7
progress::-webkit-progress-bar { /* ваши стили */ } progress::-webkit-progress-value { /* ваши стили */ }
Для Firefox:
1 2 3
progress::-moz-progress-bar { /* ваши стили */ }
А все вместе они выглядят следующим образом:
1 2 3 4 5 6 7 8 9 10 11 12
progress { /* ваши стили */ } progress::-webkit-progress-bar { /* ваши стили */ } progress::-webkit-progress-value { /* ваши стили */ } progress::-moz-progress-bar { /* ваши стили */ }
Анимация прогресс бара
HTML часть
Следующим шагом будет создание анимации прогресс бара. Итак, прогресс бар заполняется слева направо. То есть начинается когда value=»0″ и заканчивается когда value=»максимум». В качестве примера возьмем следующий код:
id="progressbar" value="0" max="100">/progress>
jQuery часть
Для анимации прогресс бара будем использовать библиотеку jQuery, поэтому ее необходимо сначала подключить:
script src="js/jquery.js" type="text/javascript">/script>
Далее пишем скрипт о том, что наш прогресс бар будет заполняться. В первой строке мы определяем тот элемент, который будет заполняться(это и есть прогресс бар), во второй получаем максимум прогресс бара из атрибута max:
1 2 3 4
var progressbar = $('#progressbar'), max = progressbar.attr('max'), value = progressbar.val(), time = (1000/max)*5;
Далее создаем переменную, которая будет хранить значение функции анимации:
1 2 3
var loading = function() { }
Внутри данной функции мы будем увеличивать заполнение прогресс бара на одну единицу:
value += 1;
А затем присваивать атрибуту value увеличенное значение:
addValue = progressbar.val(value);
Также мы будем показывать процент загрузки рядом с прогресс баром:
$('.progress-value').html(value + '%');
Затем нам нужна функция, которая запустит функцию анимации загрузки:
1 2 3
setInterval(function() { loading(); }, time);
На данный момент анимация загрузки работает, но значения будут увеличиваться до бесконечности. Поэтому необходимо создать условия, при котором анимация остановиться, когда прогресс бар полностью заполнится, то есть достигнет максимума. Будем хранить результат функции в переменной
1 2 3
var animate = setInterval(function() { loading(); }, time);
А внутри функции loading напишем условие:
1 2 3
if (value == max) { clearInterval(animate); }
Ниже представлен весь код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
$(document).ready(function() { if(!Modernizr.meter){ alert('Извините, но Ваш браузер не поддерживает HTML5 прогресс бар!'); } else { var progressbar = $('#progressbar'), max = progressbar.attr('max'), time = (1000/max)*5, value = progressbar.val(); var loading = function() { value += 1; addValue = progressbar.val(value); $('.progress-value').html(value + '%'); if (value == max) { clearInterval(animate); } }; var animate = setInterval(function() { loading(); }, time); }; });
Вывод
Данный элемент, если он красиво оформлен, также позволяет выделить ваш сайт. Я уже писал выше где он применяется, но, возможно, вы найдете ему новое предназначение �� .