Создание прогресс-бара на HTML и CSS: подробное руководство

Быстрый ответ

Чтобы создать индикатор прогресса, вы можете использовать вложенные <div>. Внешний вид элементов задайте с помощью CSS, актуальное значение прогресса отобразите путем изменения ширины внутреннего <div>:

<div class="progress-container">
  <div class="progress-value" style="width: 70%;"></div>
</div>

.progress-container {
  width: 100%;
  background: #ddd;
}

.progress-value {
  height: 20px;
  background: #76b852;
  width: 0; /* Отсюда начинается управление прогрессом */
  transition: width 0.5s; /* Плавное изменение ширины */
}

Вы можете анимировать прогресс, меняя значение ширины атрибута style.

Адаптация полосы прогресса для различных устройств

Чтобы индикатор прогресса корректно отображался на всех устройствах, используйте медиа-запросы. Примените динамическое значение радиуса скругления (border-radius), чтобы сохранить эстетику при любом уровне загрузки:

@media (max-width: 600px) {
  .progress-container {
    padding: 5px;
  }

  .progress-value {
    height: 10px; /* Уменьшенная высота */
  }
}

Чтобы углы полосы прогресса были скруглены, настройте радиус границ внутреннего <div>.

.progress-value {
  /* ...остальные стили... */
  border-radius: 10px; /* Скругленные края */
}

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

Персонализация полосы прогресса

Элемент <progress> HTML5 облегчает создание индикатора прогресса, исключая необходимость в написании скриптов на JavaScript. Просто установите атрибуты max и value:

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

Вы можете персонализировать элемент <progress> для своих задач, используя специфичные для Webkit и Mozilla псевдоэлементы:

progress {
  width: 100%; 
  appearance: none; /* Отмена стандартного вида */
}

progress::-webkit-progress-bar {
  background: #eee;
}

progress::-webkit-progress-value {
  background: #76b852;
}

progress::-moz-progress-bar {
  background: #76b852;
}

Визуализация прогресса

ASCII-арт предлагает минималистичный, но интересный способ отображения прогресса загрузки:

Прогресс, шаг за шагом:
|🎃🎃🎃🎃🎃🎃🎃🎃🎃🎃🎃🎃🎃...    | 75%
|🎃🎃🎃🎃🎃🎃🎃🎃🎃🎃...        | 50%
|🎃🎃🎃🎃🎃...    | 25%
|...    | 0%

Такое веселое отображение прогресса делает концепцию загрузки наглядной.

Яркая полоса прогресса с оригинальными украшениями

Добавьте текстовую индикацию прогресса, используя псевдоэлемент :after. Это позволит добавить в ваш индикатор личные заметки:

.progress-container:after {
  content: 'Процесс загрузки... 70%';
  position: absolute;
  right: 10px;
  top: 0;
}

Для создания центрированной полосы прогресса используйте полную ширину и отступы по краям:

.progress-container {
  /* ...дополнительные стили... */
  margin: 0 auto;
  padding: 4px; /* Дополнительный комфорт */
}

Поддержка единообразия отображения в разных браузерах

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

Полезные материалы

1. Индикаторы прогресса – Советы, методы и примеры на CSS-Tricks.
2. Элемент <progress> на сайте W3 Schools – Подробное руководство по использованию элемента <progress> в HTML.
3. Документация по тегу <progress> на MDN Web Docs – Объяснения и примеры использования элемента <progress>.
4. Терпеливо ожидайте... – Визуальное руководство по созданию анимированного индикатора прогресса на CSS.
5. Полное руководство по Flexbox на CSS-Tricks – Изучите возможности гибкого расположения элементов с Flexbox.
6. Как создать индикатор прогресса на JS с помощью W3 Schools – Шаг за шагом инструкция по созданию динамического индикатора прогресса на JavaScript вместе с CSS.