Компоненты Индикатор выполнения Компонент индикатора выполнения в темном режиме

Компонент индикатора выполнения в темном режиме

Адаптивный компонент индикатора выполнения в темном режиме для бизнес/корпоративных веб-сайтов, использующий яркие цвета и интерактивные элементы.

Предварительный просмотр

HTML-код

<div class="p-6 max-w-md mx-auto bg-gray-800 rounded-xl shadow-md space-y-4">
    <h2 class="text-2xl font-bold text-white text-center">Progress Tracker</h2>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 1</span>
        <span class="text-sm text-gray-400">75%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-green-500 h-4 rounded-full" style="width: 75%;"></div>
    </div>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 2</span>
        <span class="text-sm text-gray-400">50%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-yellow-500 h-4 rounded-full" style="width: 50%;"></div>
    </div>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 3</span>
        <span class="text-sm text-gray-400">30%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-red-500 h-4 rounded-full" style="width: 30%;"></div>
    </div>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 4</span>
        <span class="text-sm text-gray-400">10%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-blue-500 h-4 rounded-full" style="width: 10%;"></div>
    </div>
</div>

Связанные компоненты

Компонент 3D-индикатора выполнения

Отзывчивый компонент индикатора выполнения, разработанный для интерфейсов социальных сетей, с 3D-эффектом, монохроматической цветовой схемой и поддержкой темного режима, созданный с использованием Tailwind CSS.

Открытый

Индикатор прогресса Neumorphism

Отзывчивый компонент индикатора выполнения, выполненный в стиле неоморфизма, разработанный для информационных панелей, включающий интерактивную функцию и поддерживающий темный режим.

Открытый

Компонент индикатора выполнения

Простой компонент индикатора выполнения, стилизованный в брутальном стиле с цветовой схемой оттенков серого для приложений электронной коммерции. Он отзывчив и поддерживает темный режим.

Открытый