Barra de progreso
Componente de barra de progreso con diseño de microinteracciones. Incluye efectos responsivos y soporte de temas oscuros usando solo HTML y CSS (Tailwind CSS).
Código HTML
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
<div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%; animation: progress-animation 2s infinite;"></div>
</div>
<style>
@keyframes progress-animation {
0% { width: 0%; }
100% { width: 45%; }
}
.dark .bg-blue-600 {
background-color: #90cdf4; /* Lighter blue for dark mode */
}
/* Responsive considerations */
@media (max-width: 768px) {
@keyframes progress-animation {
0% { width: 0%; }
100% { width: 60%; } /* Wider progress on smaller screens */
}
.bg-blue-600 {
animation: progress-animation 2s infinite; /* Apply animation again for clarity */
}
}
</style>Componentes relacionados
Componente de la barra de progreso
Un componente de barra de progreso simple y sensible con influencia de Material Design, que utiliza tonos cálidos al atardecer. Ideal para aplicaciones de tecnología/SaaS, con soporte para modo oscuro.
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.
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.