Поиск…


параметры

параметр Значение
Максимум Сколько работы требуется в общей сложности
значение Сколько работы уже выполнено
позиция Этот атрибут возвращает текущую позицию элемента <progress>
этикетки Этот атрибут возвращает список ярлыков элементов <progress> (если они есть)

замечания

Элемент <progress> не поддерживается в версиях Internet Explorer менее 10

Элемент <progress> - это неправильный элемент, который должен использоваться для чего-то, что является просто калибром, а не для выполнения задачи. Например, показ использования дискового пространства с помощью элемента <progress> не подходит. Вместо этого элемент <meter> доступен для этого типа прецедентов.

Прогресс

Элемент <progress> является новым в HTML5 и используется для представления хода выполнения задачи

<progress value="22" max="100"></progress>

Это создает бар, заполненный 22%

Изменение цвета индикатора выполнения

Полосы хода могут быть написаны с помощью переключателя progress[value] .

В этом примере индикатор выполнения имеет ширину 250px и высоту 20 20px

progress[value] {
  width: 250px;
  height: 20px;
}

Полосы прогресса могут быть особенно сложными для стиля.

Chrome / Safari / Opera

Эти браузеры используют селектор -webkit-appearance чтобы -webkit-appearance метку прогресса. Чтобы переопределить это, мы можем сбросить внешний вид.

progress[value] {
  -webkit-appearance: none;
  appearance: none;
}

Теперь мы можем создать стиль контейнера

progress[value]::-webkit-progress-bar {
  background-color: "green";
}

Fire Fox

Firefox стилирует индикатор выполнения немного по-другому. Мы должны использовать эти стили

progress[value] {
  -moz-appearance: none;
  appearance: none;
  border: none;                /* Firefox also renders a border */
}

Internet Explorer

Internet Explorer 10+ поддерживает элемент progress . Однако он не поддерживает свойство background-color . Вместо этого вам нужно использовать свойство цвета.

progress[value]  {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  border: none;                       /* Remove border from Firefox */

  width: 250px;
  height: 20px;

  color: blue; 
}

Отказ HTML

Для браузеров, которые не поддерживают элемент progress , вы можете использовать это как обходной путь.

<progress max="100" value="20">
    <div class="progress-bar">
        <span style="width: 20%;">Progress: 20%</span>
    </div>
</progress>

Браузеры, поддерживающие тег progress, будут игнорировать div, вложенные внутри. Устаревшие браузеры, которые не могут идентифицировать метку прогресса, будут отображать div.



Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow