Volet Indicateurs de progrès
Un composant d’indicateur de progression réactif avec un design brutalisme, des tons de couleur terreux et une prise en charge du thème sombre, adapté à un blog ou à un site de contenu.
HTML Code
<div class="min-h-screen bg-stone-100 dark:bg-stone-900 p-8 flex flex-col items-center justify-center font-mono">
<div class="w-full max-w-2xl bg-stone-300 dark:bg-stone-700 border-4 border-stone-900 dark:border-stone-100 p-6 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] mb-8">
<h1 class="text-3xl md:text-5xl text-stone-900 dark:text-stone-100 mb-6 border-b-4 border-stone-900 dark:border-stone-100 pb-2">Article Progress</h1>
<!-- Progress Bar 1 -->
<div class="mb-6">
<h2 class="text-xl md:text-2xl text-stone-800 dark:text-stone-200 mb-2">Section 1: Introduction</h2>
<div class="w-full h-8 bg-stone-500 dark:bg-stone-600 border-4 border-stone-900 dark:border-stone-100 overflow-hidden">
<div class="h-full bg-amber-700 dark:bg-amber-400" style="width: 30%;"></div>
</div>
<p class="text-stone-700 dark:text-stone-300 mt-1 text-sm">30% Completed</p>
</div>
<!-- Progress Bar 2 -->
<div class="mb-6">
<h2 class="text-xl md:text-2xl text-stone-800 dark:text-stone-200 mb-2">Section 2: Core Concepts</h2>
<div class="w-full h-8 bg-stone-500 dark:bg-stone-600 border-4 border-stone-900 dark:border-stone-100 overflow-hidden">
<div class="h-full bg-amber-700 dark:bg-amber-400" style="width: 65%;"></div>
</div>
<p class="text-stone-700 dark:text-stone-300 mt-1 text-sm">65% Completed</p>
</div>
<!-- Progress Bar 3 -->
<div class="mb-6">
<h2 class="text-xl md:text-2xl text-stone-800 dark:text-stone-200 mb-2">Section 3: Conclusion</h2>
<div class="w-full h-8 bg-stone-500 dark:bg-stone-600 border-4 border-stone-900 dark:border-stone-100 overflow-hidden">
<div class="h-full bg-amber-700 dark:bg-amber-400" style="width: 10%;"></div>
</div>
<p class="text-stone-700 dark:text-stone-300 mt-1 text-sm">10% Completed</p>
</div>
<!-- Article Completion Indicator -->
<div class="mt-8 pt-4 border-t-4 border-stone-900 dark:border-stone-100">
<h2 class="text-2xl md:text-3xl text-stone-900 dark:text-stone-100 mb-4">Overall Article Progress</h2>
<div class="w-full bg-stone-500 dark:bg-stone-600 border-4 border-stone-900 dark:border-stone-100 h-10 flex items-center justify-center relative">
<div class="h-full bg-green-700 dark:bg-green-400 transition-all duration-700 ease-out" style="width: 45%;"></div>
<span class="absolute text-stone-100 dark:text-stone-900 text-lg font-bold">45% Complete</span>
</div>
<p class="text-stone-700 dark:text-stone-300 mt-2 text-sm text-center">Keep reading to finish the article!</p>
</div>
</div>
</div>Composants associés
Volet Indicateurs de progrès
Un composant d’indicateur de progression de style glassmorphism pour les applications de médias sociaux, avec des éléments translucides givrés ressemblant à du verre avec des effets de flou. Il utilise un schéma de couleurs analogue et offre une interface complexe et riche avec de multiples éléments interactifs. Le composant est réactif et prend en charge un thème sombre avec Tailwind CSS.
Volet Indicateurs de progrès
Un composant d’indicateur de progression de style luxe/premium conçu pour les applications de sport/fitness, avec des tons de bijoux, une typographie sophistiquée et une réactivité totale avec prise en charge du mode sombre.
Composant de la barre de progression 3D
Style avec des effets 3D, Tailwind CSS, un design réactif et la prise en charge du mode sombre.