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

# Прогресс

![Progress](https://72564723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXg0KhIlZk_bjQRk4u3%2Fuploads%2FCuXMfsC8w0Jjk3pGK5Um%2Fprogress.jpg?alt=media\&token=d90d3635-e034-49f5-ac2a-635999b275d7)

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

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

### Нативный

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

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

```scss
.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';`

### Кастомный

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

```html
 <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>
```

```scss
.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://jsbin.com/cefewo/edit?html,css,js,output)

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

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

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

Недостатки:

* нарушается семантика
* требуется вносить дополнительные ARIA атрибуты

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

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

```scss
.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** максимальное состояние
