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
Barre de progression du mode sombre triadique
Un composant de barre de progression simple et triadique pour le mode sombre, adapté aux blogs et à la consommation de contenu. Il dispose d’un design réactif avec Tailwind CSS, utilisant le préfixe dark : pour la prise en charge du thème sombre sans JavaScript.
Composant de la barre de progression
Un composant de barre de progression réactif conçu pour le mode sombre, à l’aide de Tailwind CSS.
Barre de progression du neumorphisme
Une barre de progression de style Neumorphisme pour les portfolios, avec une palette de couleurs pastel, une complexité modérée, une réactivité et une prise en charge du thème sombre. Aucun JavaScript n’est inclus ; le composant est construit avec HTML et Tailwind CSS.