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.
HTML Code
<div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-800 p-4">
<div class="w-full max-w-md bg-gray-200 dark:bg-gray-700 rounded-full shadow-inner dark:shadow-inner-dark overflow-hidden">
<div class="bg-purple-400 text-xs leading-none py-1 text-center text-white rounded-full shadow-neumo-progress dark:shadow-neumo-progress-dark" style="width: 75%"> 75% </div>
</div>
<div class="mt-8 text-gray-700 dark:text-gray-300">
Skill Progress
</div>
</div>
<style>
.shadow-inner {
box-shadow: inset 5px 5px 10px #b0b0b0,
inset -5px -5px 10px #f0f0f0;
}
.dark .shadow-inner-dark {
box-shadow: inset 5px 5px 10px #4a4a4a,
inset -5px -5px 10px #363636;
}
.shadow-neumo-progress {
box-shadow: 5px 5px 10px #a78bfa,
-5px -5px 10px #c084fc;
}
.dark .shadow-neumo-progress-dark {
box-shadow: 5px 5px 10px #6d28d9,
-5px -5px 10px #7c3aed;
}
</style>Composants associés
Glassmorphism_EarthTones_ProgressBar_ForumComponent
Un composant de barre de progression réactif avec des tons de terre, adapté aux forums ou aux plateformes communautaires. Comprend des éléments translucides givrés ressemblant à du verre dépoli avec des effets de flou et la prise en charge du mode sombre.
Composant de la barre de progression
Un composant de barre de progression complexe et réactif pour les services gouvernementaux/publics, avec un design épuré et minimaliste avec une palette monochrome et des accents lumineux, la prise en charge du mode sombre et des informations détaillées sur la progression.
Barre de progression triadique minimaliste
Une barre de progression minimaliste et réactive avec une palette de couleurs triadique et une prise en charge du thème sombre, adaptée aux applications de médias sociaux.