Componentes Indicadores de progreso Componente de Indicadores de Progreso

Componente de Indicadores de Progreso

Un componente de indicadores de progreso receptivo con estilo de cristal, con elementos translúcidos similares al vidrio esmerilado y efectos de desenfoque, que admite el tema oscuro con Tailwind CSS.

Vista previa

Código HTML

<div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
    <div class="bg-white bg-opacity-20 backdrop-blur-lg border border-white border-opacity-30 rounded-lg shadow-lg p-6 max-w-md w-full">
        <h2 class="text-center text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Progress Indicators</h2>
        <div class="w-full mb-4">
            <div class="flex justify-between mb-1">
                <span class="text-sm text-gray-700 dark:text-gray-300">Task 1</span>
                <span class="text-sm text-gray-700 dark:text-gray-300">75%</span>
            </div>
            <div class="bg-gray-300 rounded-full h-2.5 dark:bg-gray-700">
                <div class="bg-blue-600 h-2.5 rounded-full" style="width: 75%"></div>
            </div>
        </div>
        <div class="w-full mb-4">
            <div class="flex justify-between mb-1">
                <span class="text-sm text-gray-700 dark:text-gray-300">Task 2</span>
                <span class="text-sm text-gray-700 dark:text-gray-300">50%</span>
            </div>
            <div class="bg-gray-300 rounded-full h-2.5 dark:bg-gray-700">
                <div class="bg-green-600 h-2.5 rounded-full" style="width: 50%"></div>
            </div>
        </div>
        <div class="w-full mb-4">
            <div class="flex justify-between mb-1">
                <span class="text-sm text-gray-700 dark:text-gray-300">Task 3</span>
                <span class="text-sm text-gray-700 dark:text-gray-300">25%</span>
            </div>
            <div class="bg-gray-300 rounded-full h-2.5 dark:bg-gray-700">
                <div class="bg-red-600 h-2.5 rounded-full" style="width: 25%"></div>
            </div>
        </div>
        <div class="flex items-center justify-between mt-4">
            <img src="https://picsum.photos/50" alt="Placeholder Image" class="rounded-full">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full">
        </div>
    </div>
</div>

Componentes relacionados

Componente de barra de progreso 3D

Diseñado con efectos 3D, Tailwind CSS, diseño responsivo y compatibilidad con modo oscuro.

Abrir

Componente de Indicadores de Progreso

Un indicador de progreso de estilo neumórfico adecuado para interfaces de redes sociales, con un diseño simple y un diseño receptivo con soporte para modo oscuro.

Abrir

Componente de Indicadores de Progreso

Un componente de indicadores de progreso inspirado en Material Design con efectos responsivos y compatibilidad con temas oscuros, creado con Tailwind CSS.

Abrir