Componenti Indicatori di progresso Componente Indicatori di progresso

Componente Indicatori di progresso

Un componente indicatore di stato con uno stile glassmorphism, un design reattivo e il supporto per i temi scuri. Utilizza Tailwind CSS per lo stile.

Anteprima

Codice 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>

Componenti correlati

Componente Indicatori di progresso

Un semplice componente Progress Indicators ispirato all'estetica retrò/vintage degli anni '80 e '90, che utilizza una combinazione di colori complementari. Progettato per le interfacce dei social media e reattivo con supporto per il tema scuro.

Aperto

Componente Indicatori di progresso

Un complesso componente indicatore di avanzamento con sfumature di colore neutro fredde, transizioni fluide e progressione in più fasi adatto per siti Web governativi/di servizio pubblico. Include il supporto per la modalità oscura ed è completamente reattivo.

Aperto

Componente Indicatori di progresso

Un componente dell'indicatore di progresso reattivo con design brutalista, tonalità di colore terroso e supporto per temi scuri, adatto per un blog o un sito di contenuti.

Aperto