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

Playful_Finance_Loader

Un composant de chargement ludique et simple pour les interfaces finance/banque, avec des éléments neutres et arrondis. Entièrement réactif avec prise en charge du mode sombre.

Ouvrir

Composant des chargeurs

Un composant Loaders réactif conçu pour le mode sombre, avec des tons de terre et une complexité modérée pour la présentation du portfolio.

Ouvrir

Composant de chargement Glassmorphism

Un composant de chargeur simple, de style glassmorphism, avec des couleurs complémentaires, adapté à un portefeuille, avec une prise en charge réactive et en mode sombre.

Ouvrir