Индикатор прогресса Neumorphism
Компонент Progress Bar с дизайном Neumorphism, отзывчивыми эффектами и поддержкой темной темы с использованием Tailwind CSS
HTML-код
<!-- Light Mode -->
<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800">
<div class="w-64 h-4 bg-gray-300 rounded-full shadow-inner dark:bg-gray-700 dark:shadow-inner-dark">
<div class="w-3/4 h-full text-center text-xs text-white bg-blue-500 rounded-full dark:bg-blue-600" style="width: 75%;">
</div>
</div>
</div>
<!-- Dark Mode (example - activate dark mode in your Tailwind config) -->
<div class="flex items-center justifies-center min-h-screen bg-gray-800">
<div class="w-64 h-4 bg-gray-700 rounded-full shadow-inner-dark">
<div class="w-3/4 h-full text-center text-xs text-white bg-blue-600 rounded-full" style="width: 75%;">
</div>
</div>
</div>Связанные компоненты
Brutalist_ProgressBar
Высококонтрастный компонент прогресс-бара в бруталистском стиле, подходящий для платформ маркетплейсов, с яркими цветами и простым макетом, с полной отзывчивостью и поддержкой темного режима.
Нейроморфный индикатор выполнения
Адаптивный компонент полосы прогресса, разработанный в стиле Neumorphism, поддерживающий как светлую, так и темную темы с использованием Tailwind CSS.
Компонент индикатора выполнения
Сложный, отзывчивый компонент индикатора прогресса для государственных и общественных услуг, отличающийся чистым, минималистичным дизайном с монохромной палитрой и ярким акцентом, поддержкой темного режима и подробной информацией о ходе работы.