# Прогресс

![Progress](/files/A0Hhn5y1hgZSLe5DQnHo)

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

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

### Нативный

Упрощенная реализация выглядит следующим образом (оригинал статьи: <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://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** максимальное состояние


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://danila-korotkov.gitbook.io/front-end-patterns/shablony/struktury/progress.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.