Компонент индикатора выполнения
Простой компонент индикатора выполнения, стилизованный в брутальном стиле с цветовой схемой оттенков серого для приложений электронной коммерции. Он отзывчив и поддерживает темный режим.
HTML-код
<div class="w-full max-w-md mx-auto p-4">
<h2 class="text-white text-xl font-bold mb-2">Loading Your Items...</h2>
<div class="bg-gray-300 dark:bg-gray-700 rounded-full h-6">
<div class="bg-black dark:bg-white h-6 rounded-full" style="width: 70%;"></div>
</div>
<div class="flex justify-between mt-2">
<span class="text-gray-500 dark:text-gray-300 text-sm">0%</span>
<span class="text-gray-500 dark:text-gray-300 text-sm">70%</span>
</div>
</div>Связанные компоненты
Минималистичный индикатор выполнения
Минималистичный и плоский компонент индикатора прогресса в пастельных тонах, подходящий для профессиональных деловых или корпоративных сайтов. Он имеет адаптивный дизайн и поддерживает темный режим с использованием Tailwind CSS.
Индикатор прогресса Neumorphism
Компонент Progress Bar с дизайном Neumorphism, отзывчивыми эффектами и поддержкой темной темы с использованием Tailwind CSS
Индикатор выполнения в темном режиме Triadic
Простой компонент полосы прогресса в трех цветах для темного режима, подходящий для блогов и потребления контента. Он отличается адаптивным дизайном с использованием Tailwind CSS, используя префикс dark: для поддержки темной темы без JavaScript.