Загрузка и прогресс-бары: реализация индикаторов через CSS

Индикаторы загрузки: зачем они нужны? 🔄

Пользователи терпеть не могут ждать в неведении. Когда сайт или приложение что-то загружает, прогресс-бар — это визуальный якорь, который показывает: "Эй, всё под контролем!" Без него интерфейс кажется "зависшим", даже если процесс идёт штатно.

Анатомия прогресс-бара 🧐

Любой индикатор загрузки состоит из двух ключевых частей:

Контейнер — статичная область, задающая границы.
Заполняемая часть — динамичный элемент, показывающий прогресс.

.progress-container {
  width: 100%;
  height: 8px;
  background: #f0f0f0;
  border-radius: 4px;
}

.progress-bar {
  height: 100%;
  width: 30%; /* Меняется динамически */
  background: #4CAF50;
  border-radius: 4px;
  transition: width 0.3s ease;
}

💡 Совет: Используйте transition для плавного изменения ширины. Это создаёт ощущение "живого" интерфейса.

Варианты стилизации: от минимализма до неона ✨

1. Классический линейный бар

.linear-progress {
  background: linear-gradient(90deg, #ff9a9e 0%, #fad0c4 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

2. Полосатый эффект (как в VS Code)

.striped-progress {
  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: progressAnimation 1s linear infinite;
}

@keyframes progressAnimation {
  0% { background-position: 1rem 0; }
  100% { background-position: 0 0; }
}

3. Круговой индикатор (только CSS!)

.circle-progress {
  width: 50px;
  height: 50px;
  border: 5px solid #e0e0e0;
  border-top-color: #4285f4;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

🎨 Профессиональный приём: Для сложных анимаций комбинируйте @keyframes с transform и opacity.

Практика: создаём адаптивный прогресс-бар

Вот как выглядит полноценный пример с HTML и CSS:

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

.progress-container {
  width: 80%;
  margin: 20px auto;
  height: 12px;
  background: #eceff1;
  border-radius: 6px;
  overflow: hidden; /* Важно для скруглённых углов! */
}

.progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #00c6ff, #0072ff);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

// Пример динамического обновления
let progress = 0;
const bar = document.getElementById('myProgress');

const interval = setInterval(() => {
  progress += 10;
  bar.style.width = `${progress}%`;
  if (progress >= 100) clearInterval(interval);
}, 500);

Психология цвета: как выбрать оттенок? 🧠

Цвет	Ассоциации	Где использовать
Синий (#4285F4)	Надёжность, технологии	Загрузка файлов
Зелёный (#0F9D58)	Успех, завершение	Успешная отправка формы
Красный (#DB4437)	Ошибка, внимание	Прерванная загрузка
Оранжевый (#FF9800)	Предупреждение	Долгая обработка

🔮 Лайфхак: Для "неопределённого" прогресса (когда % неизвестен) используйте анимированный градиент или эффект пульсации.

Итог: 3 ключевых принципа

Отзывчивость — индикатор должен реагировать на действия мгновенно.
Доступность — учитывайте контрастность для слабовидящих.
Информативность — дополняйте цифрами (50%) при длительных процессах.