Нейроморфный индикатор выполнения
Адаптивный компонент полосы прогресса, разработанный в стиле Neumorphism, поддерживающий как светлую, так и темную темы с использованием Tailwind CSS.
HTML-код
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-4">
<div class="w-64 bg-gray-200 dark:bg-gray-900 rounded-full shadow-lg p-1">
<div class="bg-gradient-to-r from-blue-500 to-blue-700 h-4 rounded-full" style="width: 70%;"></div>
</div>
<span class="mt-2 text-gray-700 dark:text-gray-300">70%</span>
</div>Связанные компоненты
Киберпанк Нео-Ретро Индикатор Прогресса
Компонент индикатора выполнения средней сложности с эстетикой киберпанка, нео-ретро, темным фоном и приглушенными винтажными акцентными цветами, разработанный для развлекательных/мультимедийных платформ. Он имеет сегментированный дисплей прогресса и полностью отзывчив с поддержкой темного режима.
Минималистичный индикатор выполнения
Минималистичный и плоский компонент индикатора прогресса в пастельных тонах, подходящий для профессиональных деловых или корпоративных сайтов. Он имеет адаптивный дизайн и поддерживает темный режим с использованием Tailwind CSS.
Материал Дизайн Earthy Progress Bar
Шкала прогресса в стиле Material Design с земляными тонами, подходящая для интерфейсов социальных сетей. Он адаптивный и включает поддержку темного режима с использованием Tailwind CSS.