Компонент 3D-индикатора выполнения
Стилизован с помощью 3D-эффектов, Tailwind CSS, адаптивного дизайна и поддержки темного режима.
HTML-код
<div class='relative pt-1 dark:bg-gray-800'>
<div class='overflow-hidden h-2 text-xs flex rounded bg-gray-200 dark:bg-gray-700'>
<div style='width: 45%' class='shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500 dark:bg-blue-400'></div>
</div>
<div class='mt-2 text-right text-xs dark:text-gray-400'>45% Complete</div>
</div>Связанные компоненты
Компонент индикаторов прогресса
Индикаторы прогресса, вдохновленные бумагой/печатью, для маркетплейса, с конфетными/сладкими цветами. Сложный дизайн с несколькими шагами, адаптивная верстка и поддержка темного режима.
Компонент индикаторов прогресса
Отзывчивый компонент индикаторов прогресса, разработанный для панели мониторинга пользовательского интерфейса в темном режиме с аналогичной цветовой схемой. Он включает в себя различные индикаторы прогресса, такие как полосы, круги и лента активности, все они стилизованы под Tailwind CSS для поддержки темного режима. JavaScript не используется.
Компонент индикаторов прогресса
Простой индикатор прогресса, разработанный с эффектом стекломорфизма, подходит для веб-сайтов электронной коммерции с поддержкой темного режима и монохроматической цветовой схемой.