Componentes Indicadores de progreso Componente de Indicadores de Progreso

Componente de Indicadores de Progreso

Un componente indicador de progreso con un estilo de glassmorphism, diseño responsivo y compatibilidad con temas oscuros. Utiliza Tailwind CSS para el estilo.

Vista previa

Código HTML

<div class="flex items-center justify-center min-h-screen p-6 bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl p-6 shadow-lg">
    <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Progress</h2>
    
    <div class="mb-4">
      <div class="flex justify-between items-center mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Task Completion</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">75%</span>
      </div>
      <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
        <div class="bg-blue-600 h-2.5 rounded-full" style="width: 75%"></div>
      </div>
    </div>

    <div class="mb-4">
      <div class="flex justify-between items-center mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Resource Usage</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">50%</span>
      </div>
      <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
        <div class="bg-green-600 h-2.5 rounded-full" style="width: 50%"></div>
      </div>
    </div>

    <div>
      <div class="flex justify-between items-center mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Download Progress</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">90%</span>
      </div>
      <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
        <div class="bg-yellow-400 h-2.5 rounded-full" style="width: 90%"></div>
      </div>
    </div>

  </div>
</div>

Componentes relacionados

Indicador de progreso de sepia orgánica

Un indicador de progreso simple inspirado en la naturaleza para aplicaciones de citas/redes sociales, con tonos cálidos sepia y marrón con líneas fluidas, responsivo y compatible con el modo oscuro.

Abrir

Componente de Indicadores de Progreso

Un componente de indicadores de progreso de estilo retro/vintage con diseño responsivo y soporte de temas oscuros usando Tailwind CSS.

Abrir

Componente de Indicadores de Progreso

Un componente de indicadores de progreso receptivo diseñado para un panel de interfaz de usuario en modo oscuro con un esquema de color análogo. Incluye varios indicadores de progreso como barras, círculos y una fuente de actividad, todo ello con Tailwind CSS para la compatibilidad con el modo oscuro. No se utiliza JavaScript.

Abrir