Создаем остановочный круговой прогресс-бар только на CSS

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

С помощью SVG и свойств CSS stroke-dasharray и stroke-dashoffset просто создать круговой индикатор прогресса. Stroke-dashoffset позволяет изменять отображаемый прогресс.

Вот пример кода для отображения 50% прогресса:

<svg viewbox="0 0 36 36">
  <!-- Основной круг -->
  <circle cx="18" cy="18" r="16" stroke="#eee" fill="none" stroke-width="4"/>
  <!-- Круг, отражающий прогресс -->
  <circle cx="18" cy="18" r="16" stroke="#f06" fill="none" stroke-width="4"
    stroke-dasharray="100" stroke-dashoffset="50" />
</svg>

Ключевые моменты:

• Второй элемент <circle> обеспечивает отображение прогресса.
• stroke-dasharray="100" определяет длину штриха.
• Чтобы показать половину прогресса (50%), примените stroke-dashoffset="50".
• Модифицируйте stroke-dashoffset, чтобы отразить разные уровни заполнения.

Дополнительное улучшение кругового индикатора с использованием CSS

Анимация с помощью ключевых кадров

С помощью CSS-анимаций и @keyframes, вы можете "оживить" свою статическую диаграмму и улучшить пользовательские впечатления.

@keyframes fill {
  to {
    stroke-dashoffset: 0; 
  }
}

.progress-circle {
  animation: fill 2s ease-out forwards;
}

Для обеспечения корректной работы анимаций в различных браузерах используйте префиксы -webkit.

@-webkit-keyframes fill {
  to {
    stroke-dashoffset: 0; 
  }
}

Подробнее об этом расскажет наш спикер на видео

Управление динамикой с использованием CSS переменных

Используйте CSS переменные, например, --progress, для динамического изменения значения stroke-dashoffset.

:root {
  --progress: 75;
}

.progress-circle {
  stroke-dashoffset: calc(100 – var(--progress));
}

Прогресс можно обновить напрямую в HTML:

<style>
  .progress-circle {
    stroke-dashoffset: calc(100 – var(--progress));
  }
</style>

<svg style="--progress:30;">
  <!-- Здесь будут располагаться элементы круга -->
</svg>

Элегантная отделка при помощи градиентов и теней

Создайте визуально привлекательный дизайн с использованием линейных градиентов и теней.

.progress-circle {
  stroke: linear-gradient(to right, #f06, #aef);
  box-shadow: 0px 0px 10px #ccc; /* Тень для создания эффекта глубины */
}

Центрирование элементов индикатора прогресса через flexbox

Центрируйте ваш индикатор прогресса для корректного отображения на любом устройстве — от больших 4K мониторов до маленьких мобильных экранов.

.container {
  display: flex; 
  justify-content: center; /* Горизонтальное центрирование */
  align-items: center; /* Вертикальное центрирование */
  height: 100vh; 
}

Продвинутые CSS улучшения

Конические градиенты для эффекта смены цвета

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

.progress {
  background-image: conic-gradient(#f06 0%, #aef var(--progress), #eee var(--progress));
}

Трансформации для большей динамики

Добавьте реакцию круга на действия пользователей. Например, круг может увеличиваться при наведении курсора.

.progress-circle:hover {
  transform: scale(1.1); /* Увеличение круга */
  transition: transform 0.3s ease-in-out; /* Плавное увеличение */
}

Динамическое отображение прогресса через JavaScript

Небольшая доля JavaScript может помочь динамически контролировать прогресс в соответствии с действиями пользователя.

document.querySelector('.progress-button').addEventListener('click', function() {
  var circle = document.querySelector('.progress-circle');
  var progress = parseInt(circle.style.getPropertyValue('--progress'), 10);
  progress = (progress + 10) % 100; /* Возможность для улучшения всегда есть */
  circle.style.setProperty('--progress', progress);
});

Визуализация

Представьте индикатор прогресса как циферблат часов (🕒), где прогресс — это минутная стрелка, делающая полный круг.

Прогресс 0%:   🕛 (минутная стрелка указывает на 12)
Прогресс 50%:  🕒 (минутная стрелка на 3)
Прогресс 100%: 🕛 (стрелка снова на 12)

Так же, как время рассказывает историю, так и ваш индикатор на CSS рассказывает историю прогресса.

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

1. Использование CSS анимаций – CSS: Каскадные таблицы стилей | MDN — подробный ресурс MDN для освоения анимаций на CSS.
2. Быстрое создание кольца прогресса с помощью CSS | CSS-Tricks — практическое руководство по созданию кольца прогресса с использованием SVG и CSS.
3. Путеводитель по анимациям на CSS: основные принципы и примеры — Smashing Magazine — подробный обзор создания впечатляющих анимаций на CSS.
4. Постепенное улучшение пользовательского интерфейса с помощью CSS – A List Apart — советы по эффективной стилизации интерфейса с использованием только CSS.
5. Frontend Mentor | Реальные задания для практики в области фронтенд-разработки — задания для практики, включая создание SVG-индикатора прогресса без JavaScript.
6. Еженедельная подборка CSS анимаций – CSS Animation — источник качественного контента для получения вдохновения и освоения CSS анимаций.