Компонент 3D-индикатора выполнения
Отзывчивый компонент индикатора выполнения, разработанный для интерфейсов социальных сетей, с 3D-эффектом, монохроматической цветовой схемой и поддержкой темного режима, созданный с использованием Tailwind CSS.
HTML-код
<div class="flex flex-col items-center py-10">
<div class="w-full max-w-md">
<div class="flex justify-between mb-2">
<span class="text-gray-700 dark:text-gray-300">Progress</span>
<span class="text-gray-700 dark:text-gray-300">75%</span>
</div>
<div class="relative bg-gray-200 dark:bg-gray-700 rounded-full h-4">
<div class="absolute bg-blue-600 dark:bg-blue-300 h-full rounded-full transition-all duration-300 ease-in-out" style="width: 75%; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2), 0px 0px 15px rgba(0, 0, 0, 0.2);"></div>
</div>
</div>
<div class="flex justify-center mt-4">
<img src="https://picsum.photos/50/50" alt="Progress Image" class="rounded-full border border-gray-300 dark:border-gray-600 shadow-md">
</div>
<div class="mt-2 text-gray-500 dark:text-gray-400 text-sm">Some description about the progress being tracked.</div>
</div>Связанные компоненты
3D Серый Спортивный Фитнес Индикатор Прогресса
Сложный компонент индикатора выполнения в оттенках серого в оттенках серого, предназначенный для занятий спортом и фитнесом, показывает прогресс тренировки с глубиной и визуальным вовлечением. Он включает поддержку темного режима и полностью отзывчив.
Brutalist_ProgressBar
Высококонтрастный компонент прогресс-бара в бруталистском стиле, подходящий для платформ маркетплейсов, с яркими цветами и простым макетом, с полной отзывчивостью и поддержкой темного режима.
ProgressBarComponent (ProgressBarComponent)
Простой, понятный и отзывчивый компонент индикатора выполнения с неоново-электрическими цветами для веб-сайтов ресторанов и ресторанов, с поддержкой темного режима и дизайном в стиле швейцарской/международной типографики.