Componente de la barra de progreso
Un componente de barra de progreso responsivo diseñado teniendo en cuenta el modo oscuro, utilizando Tailwind CSS.
Código HTML
<div class="flex items-center justify-center h-screen bg-gray-900">
<div class="w-full max-w-md">
<h2 class="text-white text-lg font-semibold mb-4">Progress Bar</h2>
<div class="relative pt-1">
<div class="flex items-center justify-between mb-2">
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200">
70%
</span>
<span class="text-xs font-semibold inline-block text-gray-400">
7/10
</span>
</div>
<div class="h-2 bg-gray-700 rounded">
<div class="h-full bg-teal-500 rounded" style="width: 70%;"></div>
</div>
</div>
<p class="text-gray-400 text-sm mt-2">Loading...</p>
</div>
</div>Componentes relacionados
Componente de la barra de progreso de la Bauhaus
Un componente de barra de progreso de complejidad moderada, receptivo e inspirado en la Bauhaus adecuado para plataformas de entretenimiento/medios, con neutros fríos y soporte para modo oscuro.
Componente de la barra de progreso
Un componente de barra de progreso complejo y receptivo para servicios gubernamentales/públicos, con un diseño limpio y minimalista con una paleta monocromática y acento brillante, compatibilidad con modo oscuro e información de progreso detallada.
Barra de progreso de fitness deportivo en escala de grises 3D
Un complejo componente de barra de progreso en escala de grises en 3D diseñado para aplicaciones deportivas y de fitness, que muestra el progreso del entrenamiento con profundidad y compromiso visual. Incluye soporte para el modo oscuro y es totalmente responsivo.