Componente de la barra de progreso
Un componente simple de la barra de progreso con estilo de vidrio y colores monocromáticos, adecuado para sitios web comerciales y corporativos, con soporte para el modo oscuro.
Código HTML
<div class="flex flex-col items-center justify-center h-screen bg-gray-900 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-700 bg-opacity-30 backdrop-blur-md border border-gray-500 rounded-lg p-6 shadow-lg w-1/2">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Progress</h2>
<div class="relative w-full h-4 rounded-full bg-gray-300 dark:bg-gray-600">
<div class="absolute top-0 left-0 h-4 rounded-full bg-blue-500" style="width: 70%;"></div>
</div>
<span class="text-base text-gray-800 dark:text-gray-200 mt-2">70%</span>
</div>
</div>Componentes relacionados
Barra de progreso de neumorfismo
Un componente de barra de progreso con estilo neumorfismo receptivo diseñado para paneles, que incorpora una función interactiva y admite el modo oscuro.
Barra de progreso de Glassmorphism
Barra de progreso de estilo glassmorphism diseñada para interfaces de redes sociales, con colores vibrantes y compatibilidad con el modo oscuro. Diseño simple sin JavaScript.
Barra de progreso del modo oscuro
Un componente de barra de progreso receptivo diseñado para el modo oscuro usando Tailwind CSS, con un diseño elegante y soporte para temas oscuros.