Компонент «Индикаторы прогресса»
Индикатор прогресса в неморфном стиле, подходящий для интерфейсов социальных сетей, отличается простым макетом и адаптивным дизайном с поддержкой темного режима.
HTML-код
<div class="flex flex-col items-center justify-center p-6">
<div class="w-full max-w-xs p-4 bg-gray-200 rounded-lg shadow-lg dark:bg-gray-800 dark:shadow-md">
<h3 class="text-center text-lg font-semibold text-gray-800 dark:text-gray-200">Profile Completion</h3>
<div class="my-4">
<div class="flex justify-between">
<span class="text-sm text-gray-600 dark:text-gray-400">0%</span>
<span class="text-sm text-gray-600 dark:text-gray-400">100%</span>
</div>
<div class="h-2 bg-gray-300 rounded-lg dark:bg-gray-700">
<div class="h-full bg-gradient-to-r from-green-400 to-blue-500 rounded-lg" style="width: 70%;"></div>
</div>
</div>
<div class="flex items-center justify-between">
<img src="https://picsum.photos/40" alt="User Avatar" class="rounded-full border-2 border-gray-300 dark:border-gray-600" />
<span class="text-sm text-gray-800 dark:text-gray-200">User Name</span>
</div>
</div>
</div>Связанные компоненты
Индикатор прогресса органической сепии
Простой, вдохновленный природой индикатор прогресса для приложений для знакомств и социальных сетей, выполненный в теплых тонах сепии и коричневых тонах с плавными линиями, отзывчивый и совместимый с темным режимом.
Компонент «Индикаторы прогресса»
Компонент индикаторов прогресса в стиле ретро/винтаж, использующий Tailwind CSS с отзывчивыми эффектами и поддержкой темных тем.
Компонент «Индикаторы промышленного прогресса»
Сложный, высококонтрастный компонент индикаторов прогресса с эстетикой промышленного дизайна, подходящий для деловых/корпоративных сайтов. Имеет несколько индикаторов выполнения, подробный раздел состояния и текстуры исходных материалов, полностью адаптивный с поддержкой темного режима.