Прогресс

Элемент отображения выполнения пр

Progress

Основные данные

Блок прогресса можно выполнить используя нативные элемент html <progress> и без него.

Нативный

Упрощенная реализация выглядит следующим образом (оригинал статьи: https://htmlweb.ru/html/form/progress.php):

<progress class="progress-native" value="70" max="100"></progress>

.progress-native {
   appearance: none;
   border: none;
   margin-top: 10px;
   background: #eee;
   border: 0;
   width: 100%;
   height: 25px;
   border-radius: 9px;
   color: #9c3;

   &::-webkit-progress-bar {
      background: #eeeeee;
      border-radius: 9px;
   }
   &::-webkit-progress-value {
      background: linear-gradient(to bottom, rgb(23, 26, 21) 0%, #9c3 100%);
      border-radius: 9px;
   }
   &::-moz-progress-bar {
      background: linear-gradient(to bottom, rgb(48, 53, 44) 0%, #9c3 100%);
      border-radius: 9px;
   }
}

Недостатками варианта такой реализации:

• нельзя складывать индикаторы выполнения

• нельзя анимировать

• нельзя разместить над ними текстовые метки

• плохая поддержка и дублирование свойств

Достоинства:

Можно удобно обращаться к одному параметру в JS:

document.getElementById('progress').value = '50';

Кастомный

Вариант с строкой состояния и анимацией.

 <div class="progress" data-scriptname="unloading">
   <div class="progress__status">70%</div>
   <div class="progress__bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 70%"></div>
</div>

.progress {
   height: rem(25);
   border-radius: var(--size-border-radius);
   background-color: var(--color-bg-gray);

   &__status {
      position: absolute;
      width: 70%;
      text-align: center;
      color: var(--color-white);
      font-weight: bold;
   }

   &__bar {
      width: 70%;
      height: 100%;
      border-radius: var(--size-border-radius);
      background-color: var(--color-active);
      background-image: linear-gradient(
         45deg,
         rgba(255, 255, 255, 0.15) 25%,
         transparent 25%,
         transparent 50%,
         rgba(255, 255, 255, 0.15) 50%,
         rgba(255, 255, 255, 0.15) 75%,
         transparent 75%,
         transparent
      );
      background-size: 1rem 1rem;
      animation: progress-bar-stripes 1s linear infinite;
   }
}

@keyframes progress-bar-stripes {
   from {
      background-position: 32px 0;
   }
   to {
      background-position: 0 0;
   }
}

Вариант 2: https://jsbin.com/cefewo/edit?html,css,js,output

Нативный + кастомный

Вариант усложненной реализации (с процентами и анимацией) - https://habr.com/ru/post/266895/

Этот вариант используется оба метода.

Недостатки:

• нарушается семантика

• требуется вносить дополнительные ARIA атрибуты

Мой вариант с псевдоэлементами:

<progress class="progress-native2" value="70" max="100"></progress>

.progress-native2 {
   position: relative;
   &::before {
      content: "";
      position: absolute;
      display: block;
      width: 100%;
      height: rem(24);
      background-color: #ccc;
      border-radius: var(--size-border-radius);
   }
   &::after {
      content: attr(value) "%";
      position: absolute;
      display: block;
      height: 24px;
      border-radius: var(--size-border-radius);
      background-color: violet;
   }
}

Интерактивный дизайн

Screenreader

При изменении состояния (процента) необходимо объявлять его.

ARIA

В этом разделе перечислены все соответствующие роли, состояния и свойства ARIA для кнопки.

role Сообщает AT, что выбрана роль стандартного элемента (в данном случае "progress")

aria-valuenow текущее состояние "прогресса"

aria-valuemin минимальное состояние

aria-valuemax максимальное состояние