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

Метод 1: использование границы CSS и свойства преобразования

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

.progress-bar {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 10px solid #e0e0e0;
  border-top-color: #ff5f5f;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

Метод 2: элемент круга SVG

<svg class="progress-bar" width="200" height="200">
  <circle class="bg-circle" cx="100" cy="100" r="90"></circle>
  <circle class="progress-circle" cx="100" cy="100" r="90"></circle>
</svg>

.progress-bar .bg-circle {
  fill: none;
  stroke: #e0e0e0;
  stroke-width: 10;
}
.progress-bar .progress-circle {
  fill: none;
  stroke: #ff5f5f;
  stroke-width: 10;
  stroke-dasharray: 565.48;
  stroke-dashoffset: 0;
  animation: progress 2s ease-in-out forwards;
}
@keyframes progress {
  0% { stroke-dashoffset: 565.48; }
  100% { stroke-dashoffset: 0; }
}

Метод 3: радиальный градиент CSS

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

.progress-bar {
  width: 200px;
  height: 200px;
  background: conic-gradient(#e0e0e0 0%, #e0e0e0 calc(100% - var(--progress)), #ff5f5f calc(100% - var(--progress)), #ff5f5f 100%);
  border-radius: 50%;
}

Метод 4: путь к клипу и CSS-анимация

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

«»;
позиция: абсолютная;
сверху: 0;
слева: 0;
ширина: 100%;
высота: 100%;
фон: #ff5f5f ;
clip-path: полигон(0 0, 100% 0, 100% var(–progress), 0 var(–progress));
анимация: заполнение 2 с замедлением вперед;

@keyframes fill {
0% { –progress: 100%;
100% { –progress: 0;

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

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