Компонент индикатора выполнения
Адаптивный компонент индикатора выполнения, предназначенный для темного режима с пастельной цветовой гаммой, подходит для деловых/корпоративных сайтов.
HTML-код
<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-md">
<h2 class="text-white text-lg font-semibold mb-4">Progress Bar</h2>
<div class="relative pt-1">
<div class="flex justify-between mb-1 text-sm text-white">
<span>0%</span>
<span>100%</span>
</div>
<div class="h-2 bg-gray-600 rounded">
<div class="bg-pastel-green-500 h-full rounded" style="width: 70%;"></div>
</div>
</div>
<div class="flex items-center justify-between mt-4">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
<span class="text-white">John Doe</span>
</div>
<span class="text-gray-400 dark:text-gray-500">In Progress</span>
</div>
</div>Связанные компоненты
Индикатор прогресса Neumorphism
Отзывчивый компонент индикатора выполнения, выполненный в стиле неоморфизма, разработанный для информационных панелей, включающий интерактивную функцию и поддерживающий темный режим.
Компонент индикатора выполнения
Простой компонент индикатора выполнения, стилизованный в брутальном стиле с цветовой схемой оттенков серого для приложений электронной коммерции. Он отзывчив и поддерживает темный режим.
Компонент 3D-индикатора выполнения
Отзывчивый компонент индикатора выполнения, разработанный для интерфейсов социальных сетей, с 3D-эффектом, монохроматической цветовой схемой и поддержкой темного режима, созданный с использованием Tailwind CSS.