Composants Chargeuses Chargeur neumorphe

Chargeur neumorphe

Un composant de chargement Neumorphic simple pour les sites de commerce électronique avec prise en charge du mode sombre.

Aperçu

HTML Code

<div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
  <div class="w-64 h-64">
    <div class="relative w-full h-full rounded-lg bg-gray-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
        <div class="w-16 h-16 border-4 border-blue-500 border-solid rounded-full animate-spin border-t-transparent"></div>
      </div>
      <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
        <div class="w-10 h-10 border-4 border-purple-500 border-solid rounded-full animate-spin border-t-transparent"></div>
      </div>
    </div>
  </div>
</div>

<style>
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.shadow-neumorphic-light {
  box-shadow: 7px 7px 14px #b0b0b0, -7px -7px 14px #ffffff;
}

.dark .shadow-neumorphic-dark {
  box-shadow: 7px 7px 14px #4a4a4a, -7px -7px 14px #363636;
}
</style>

Composants associés

Composant des chargeurs

Un composant de chargeur en mode sombre simple avec une palette de couleurs complémentaire.

Ouvrir

Composant des chargeurs

Un composant de chargeurs conçu dans le style Material Design, avec des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir

Cône de chargement en niveaux de gris

Un composant de spinner de chargement simple avec des couleurs en niveaux de gris et un focus de micro-interaction.

Ouvrir