Прогресс бар это графический элемент представляющий собой полосу которая визуально отображает прогресс выполнения определенной задачи

---

Что такое прогресс-бар и зачем он нужен?

Прогресс-бар, это графический элемент, представляющий собой полосу, которая визуально отображает прогресс выполнения определенной задачи. Он служит обратной связью для пользователя, показывая, сколько уже сделано и сколько осталось до завершения. В различном виде прогресс-бар может информировать о процессе загрузки, отправки данных, выполнения операции или просто служить стилистическим элементом сайта.

Правильно сделанный прогресс-бар помогает снизить ощущение ожидания, сделать взаимодействие более комфортным и приятным. Особенно актуально это при работе с большими файлами, загрузке страниц или выполнении вычислительных задач.

---

Основные компоненты прогресс-бар

Для создания прогресс-бар нам понадобятся два ключевых элемента:

1. Контейнер — элемент, внутри которого располагается вся полоса. Обычно это блок с фиксированной шириной и высотой.
2. Заполняющая часть — элемент, который отображает текущий прогресс и изменяется по мере выполнения задачи.

Наиболее распространенная структура выглядит так:

<div class="progress-container">
 <div class="progress-bar"></div>
</div>

В дальнейшем мы добавим отображение процентов и красиво оформим эти элементы.

---

Создаем базовую разметку и стили для прогресс-бара

Начнем с простого оформления контейнера и полосы, которая будет показывать прогресс. Для этого используем CSS:

.progress-container {
 width: 100%; /* ширина по родительскому элементу /
 max-width: 600px; / ограничение по ширине для красоты /
 height: 30px; / высота полосы /
 background-color: #e0e0e0; / цвет фона контейнера /
 border-radius: 15px; / скругление углов /
 overflow: hidden; / чтобы заполняющая часть не выходила за границы /
 margin: 20px auto; / по центру /
 position: relative; / для позиционирования процентов /
}

.progress-bar {
 height: 100%;
 width: 0%; / изначально прогресс нулевой /
 background-color: #4CAF50; / цвет полосы — зеленый /
 border-radius: 15px 0 0 15px; / скругление только слева, чтобы не было дыр /
 transition: width 0.5s ease; / плавное изменение ширины */
}

Так мы создаем основу для динамической полосы. Теперь нужно добавить отображение процентов.

---

Добавление отображения процентов

Для отображения текущего процента можно использовать отдельный элемент или разместить число прямо внутри контейнера. В данном случае сделаем небольшое число справа, чтобы было удобно просматривать прогресс.

<div class="progress-container">
 <div class="progress-bar" id="myProgressBar"></div>
 <div class="progress-text" id="progressText">0%</div>
</div>

И стили для текста:

.progress-text {
 position: absolute;
 top: 50%;
 right: 20px;
 transform: translateY(-50%);
 font-weight: bold;
 color: #000;
}

Теперь у нас есть не только прогресс-бар, но и видеть текущие проценты в реальном времени.

---

Динамическое управление прогрессом с помощью JavaScript

Для того чтобы прогресс-бар красиво отображал текущий прогресс, нужно управлять шириной через JavaScript. Создадим функцию, которая будет обновлять прогресс в зависимости от прогресс-значения:

<script>
function setProgress(percent) {
 const progressBar = document.getElementById('myProgressBar');
 const progressText = document.getElementById('progressText');
 
 // Ограничение значений
 if (percent < 0) percent = 0;
 if (percent > 100) percent = 100;
 
 // Обновление ширины полосы
 progressBar.style.width = percent + '%';
 
 // Обновление текста
 progressText.innerText = percent + '%';
}

Используйте эту функцию, чтобы обновлять прогресс в зависимости от выполнения задачи. Например:

setProgress(45);

выведет 45% прогресса и заполнит полосу на 45% ширины.

---

Пример полноценной реализации

Чтобы понять, как все элементы работают вместе, представим полный пример:

<div class="progress-container">
 <div class="progress-bar" id="myProgressBar"></div>
 <div class="progress-text" id="progressText">0%</div>
</div>

<script>
 let currentProgress = 0;

 function setProgress(percent) {
 const progressBar = document.getElementById('myProgressBar');
 const progressText = document.getElementById('progressText');
 if (percent < 0) percent = 0;
 if (percent > 100) percent = 100;
 progressBar.style.width = percent + '%';
 progressText.innerText = percent + '%';
 }

 // Демонстрация прогресса
 const interval = setInterval( => {
 if (currentProgress >= 100) {
 clearInterval(interval);
 } else {
 currentProgress += 10; // увеличиваем прогресс
 setProgress(currentProgress);
 }
 }, 500); // обновление каждые 0.5 сек
</script>

Этот пример симулирует прогресс, который автоматически увеличивается каждые полсекунды до 100%.

---

Как сделать прогресс-бар адаптивным и стильным?

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

Вот несколько советов:

• Используйте проценты для ширины, чтобы она автоматически подстраивалась под контейнер.
• Добавьте плавное исчезновение и появление элементов с помощью transition и animation.
• Используйте градиенты или тени для красоты.
• Пишите адаптивные стили, чтобы ширина и высота менялись под размер экрана.

Пример расширенных стилей:

.progress-container {
 width: 100%;
 max-width: 80%; /* ширина % от родителя */
 height: 20px;
 background-color: #ddd;
 border-radius: 10px;
 box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
 position: relative;
 margin: 20px auto;
 padding: 2px;
}
.progress-bar {
 height: 100%;
 width: 0%;
 background: linear-gradient(45deg, #6a11cb, #2575fc);
 border-radius: 8px;
 transition: width 0.4s ease;
}

Подробнее

Прогресс-бар своими руками	Как сделать анимацию прогресса	Лучшие практики CSS для прогресс-баров	JavaScript управление прогрессом	Адаптивные прогресс-бары
CSS анимации прогресс-бара	Градиенты и стили для прогресс-бара	Обновление прогресса с помощью JS	Респонсив прогресс-бар