Как создать красивый и функциональный круглый прогресс-бар: пошаговая инструкция

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

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

Основные причины использовать круглый прогресс-бар:

• Эстетика: такие прогресс-бары выглядят современно и привлекательно.
• Экономия места: идеально вписываются в компактные интерфейсы.
• Интуитивность: легко воспринимается пользователями, особенно в мобильных приложениях.

Основные компоненты и принципы работы

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

1. Круглая основа: элемент, который задает границы прогресс-бара.
2. Заполнение: сегмент или часть окружности, отображающая прогресс.
3. Анимация: плавное увеличение заполнения для визуальной привлекательности.

Эти компоненты могут быть реализованы с помощью CSS, а их динамическое изменение — через JavaScript.

Пошаговая инструкция по созданию круглого прогресс-бара

Начнем с простейшей структуры. Для этого используем элемент <canvas> или SVG, но более популярным и гибким способом является использование CSS с элементом <div>.

<div class="progress-circle">
 <div class="progress-inner"></div>
</div>

Шаг 2: CSS-стилизация

Создадим внешний вид круга и его заливку; Используем CSS для стилизации:

.progress-circle {
 width: 150px;
 height: 150px;
 border-radius: 50%;
 background: conic-gradient(green 0deg, green 0deg, #eee 0deg, #eee 360deg);
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: bold;
 font-size: 1.2em;
}
.progress-inner {
 width: 130px;
 height: 130px;
 background-color: white;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
}

Здесь мы используем свойство conic-gradient для создания сегментированного заполняющего круга.

Шаг 3: Динамическое изменение прогресса с помощью JavaScript

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

function updateProgress(percent) {
 const circle = document.querySelector('.progress-circle');
 const angle = percent * 3.6; // 100% = 360 градусов
 circle.style.background = `conic-gradient(green ${angle}deg, #eee ${angle}deg, #eee 360deg)`;
 document.querySelector('.progress-inner').innerText = `${percent}%`;
}

// Например, обновим прогресс до 75%
updateProgress(75);

Дополнительные советы и нюансы

Для придания прогресс-бару более профессионального вида можно использовать анимации, дополнительные эффекты, а также сделать его интерактивным.

Добавляем плавную анимацию

Используем свойство transition в CSS:

.progress-circle {
 transition: background 0.5s ease;
}

Это обеспечит плавное изменение сегмента при обновлении прогресса.

Интерактивность и адаптивность

Можно сделать так, чтобы прогрессбар реагировал на события, например, на клики или скроллирование, и подстраивался под размеры экрана для мобильных устройств:

• Обработка событий: обновление прогресса при нажатии кнопки.
• Масштабируемость: использование относительных единиц измерения (%, vw, vh).

Практический пример полностью

В конце — полный рабочий пример, который можно вставить в ваш проект:

<div class="progress-circle">
 <div class="progress-inner">0%</div>
</div>

<button onclick="updateProgress(50)">50%</button>
<button onclick="updateProgress(75)">75%</button>
<button onclick="updateProgress(100)">100%</button>

.progress-circle {
 width: 150px;
 height: 150px;
 border-radius: 50%;
 background: conic-gradient(green 0deg, green 0deg, #eee 0deg, #eee 360deg);
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: bold;
 font-size: 1.2em;
 transition: background 0.5s ease;
}
.progress-inner {
 width: 130px;
 height: 130px;
 background-color: white;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
}

function updateProgress(percent) {
 const circle = document.querySelector('.progress-circle');
 const angle = percent * 3.6; // 100% = 360 градусов
 circle.style.background = `conic-gradient(green ${angle}deg, #eee ${angle}deg, #eee 360deg)`;
 document.querySelector('.progress-inner').innerText = `${percent}%`;
}

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

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