Компонент индикатора выполнения
Простой компонент прогресс-бара, стилизованный под стеклянный морфизм и монохроматические цвета, подходит для деловых и корпоративных сайтов, с поддержкой темного режима.
HTML-код
<div class="flex flex-col items-center justify-center h-screen bg-gray-900 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-700 bg-opacity-30 backdrop-blur-md border border-gray-500 rounded-lg p-6 shadow-lg w-1/2">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Progress</h2>
<div class="relative w-full h-4 rounded-full bg-gray-300 dark:bg-gray-600">
<div class="absolute top-0 left-0 h-4 rounded-full bg-blue-500" style="width: 70%;"></div>
</div>
<span class="text-base text-gray-800 dark:text-gray-200 mt-2">70%</span>
</div>
</div>Связанные компоненты
ProgressBarComponent (ProgressBarComponent)
Простой, понятный и отзывчивый компонент индикатора выполнения с неоново-электрическими цветами для веб-сайтов ресторанов и ресторанов, с поддержкой темного режима и дизайном в стиле швейцарской/международной типографики.
Градиентный радужный индикатор выполнения для фотосъемки
Сложный, отзывчивый компонент индикатора выполнения для портфолио фотографий, отличающийся многоцветным градиентным радужным дизайном и поддержкой темного режима. Идеально подходит для демонстрации загрузки фотографий или продвижения по галерее.
Компонент 3D-индикатора выполнения
Отзывчивый компонент индикатора выполнения, разработанный для интерфейсов социальных сетей, с 3D-эффектом, монохроматической цветовой схемой и поддержкой темного режима, созданный с использованием Tailwind CSS.