Barre de progression
Composant de barre de progression avec conception de micro-interactions. Comprend la prise en charge des effets réactifs et des thèmes sombres en utilisant uniquement HTML et CSS (Tailwind CSS).
HTML Code
<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>Composants associés
Composant de la barre de progression Bauhaus
Un composant de barre de progression de complexité modérée, réactif, inspiré du Bauhaus, adapté aux plates-formes de divertissement/médias, avec des neutres froids et la prise en charge du mode sombre.
Barre de progression néo-rétro cyberpunk
Un composant de barre de progression de complexité modérée avec une esthétique cyberpunk et néo-rétro, des arrière-plans sombres et des couleurs d’accent vintage discrètes, conçu pour les plateformes de divertissement/médias. Il dispose d’un affichage de progression segmenté et est entièrement réactif avec la prise en charge du mode sombre.
ProgressBarComponent
Un composant de barre de progression simple, propre et réactif avec des couleurs néon/électriques pour les sites Web d’alimentation/restaurants, avec prise en charge du mode sombre et conception typographique suisse/internationale.