Chargeuses

Chargeur neumorphe

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

Ouvrir l’aperçu

                <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>

Chargeur de neumorphisme

Composant de chargeur avec style Neumorphisme et palette de couleurs pastel pour le commerce électronique. Complexité simple, réactif avec prise en charge du mode sombre. Pas de JavaScript.

Ouvrir l’aperçu

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
  <div class="loader ease-linear rounded-full border-8 border-t-8 border-gray-200 dark:border-gray-700 h-32 w-32 relative" style="border-top-color: #a78bfa;">
    <div class="absolute inset-0 flex items-center justify-center text-gray-500 dark:text-gray-400 text-2xl">
      Loading...
    </div>
  </div>
</div>

<style>
  .loader {
    animation: spin 2s linear infinite;
    box-shadow: 8px 8px 16px #a7a7a7, -8px -8px 16px #ffffff; /* Neumorphism effect */
  }

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

  .dark .loader {
     box-shadow: 8px 8px 16px #4b5563, -8px -8px 16px #1f2937; /* Neumorphism effect for dark mode */
  }
</style>

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 l’aperçu

                <div class="min-h-screen flex flex-col items-center justify-center bg-gray-900 text-gray-100">
    <h1 class="text-3xl font-bold mb-6">Loading...</h1>
    <div class="flex space-x-4">
        <!-- Loader 1 -->
        <div class="flex flex-col items-center">
            <div class="w-16 h-16 rounded-full bg-earth-700 animate-bounce">  
                <img class="w-full h-full rounded-full" src="https://picsum.photos/seed/1/100" alt="Loading Image 1">
            </div>
            <p class="mt-2">Loading content...</p>
        </div>
        
        <!-- Loader 2 -->
        <div class="flex flex-col items-center">
            <div class="w-16 h-16 rounded-full bg-earth-600 animate-bounce">  
                <img class="w-full h-full rounded-full" src="https://picsum.photos/seed/2/100" alt="Loading Image 2">
            </div>
            <p class="mt-2">Almost there...</p>
        </div>
        
        <!-- Loader 3 -->
        <div class="flex flex-col items-center">
            <div class="w-16 h-16 rounded-full bg-earth-500 animate-bounce">  
                <img class="w-full h-full rounded-full" src="https://picsum.photos/seed/3/100" alt="Loading Image 3">
            </div>
            <p class="mt-2">Just a moment...</p>
        </div>
    </div>
    <div class="mt-8 p-4 rounded-lg bg-gray-800 shadow-lg">
        <h2 class="text-xl font-semibold">Featured Projects</h2>
        <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="p-4 rounded-lg bg-earth-700 shadow hover:shadow-xl transition-shadow duration-300">
                <img src="https://picsum.photos/seed/4/500/300" alt="Project 1" class="rounded-lg">
                <h3 class="mt-2 text-lg font-semibold">Project Title 1</h3>
                <p class="text-gray-300">Short description of the project.</p>
            </div>
            <div class="p-4 rounded-lg bg-earth-700 shadow hover:shadow-xl transition-shadow duration-300">
                <img src="https://picsum.photos/seed/5/500/300" alt="Project 2" class="rounded-lg">
                <h3 class="mt-2 text-lg font-semibold">Project Title 2</h3>
                <p class="text-gray-300">Short description of the project.</p>
            </div>
            <div class="p-4 rounded-lg bg-earth-700 shadow hover:shadow-xl transition-shadow duration-300">
                <img src="https://picsum.photos/seed/6/500/300" alt="Project 3" class="rounded-lg">
                <h3 class="mt-2 text-lg font-semibold">Project Title 3</h3>
                <p class="text-gray-300">Short description of the project.</p>
            </div>
            <div class="p-4 rounded-lg bg-earth-700 shadow hover:shadow-xl transition-shadow duration-300">
                <img src="https://picsum.photos/seed/7/500/300" alt="Project 4" class="rounded-lg">
                <h3 class="mt-2 text-lg font-semibold">Project Title 4</h3>
                <p class="text-gray-300">Short description of the project.</p>
            </div>
        </div>
    </div>
</div>

Chargeur en mode sombre

Loader ou Skeleton Component pour les interfaces en mode sombre, avec des fonctionnalités réactives. Pas besoin de Javascript.

Ouvrir l’aperçu

                <div class="flex flex-col gap-4 w-full">
  <div class="flex items-center justify-between">
    <div>
      <div class="h-2 w-24 bg-gray-500 rounded"></div>
      <div class="h-2 w-16 bg-gray-500 mt-2 rounded"></div>
    </div>
    <div class="h-10 w-10 bg-gray-500 rounded-full"></div>
  </div>
  <div class="space-y-2">
    <div class="h-2 w-full bg-gray-500 rounded"></div>
    <div class="h-2 w-full bg-gray-500 rounded"></div>
    <div class="h-2 w-full bg-gray-500 rounded"></div>
    <div class="h-2 w-1/2 bg-gray-500 rounded"></div>
  </div>
</div>

Un composant de chargeur de style Neumorphism avec des effets réactifs et une prise en charge du thème sombre utilisant Tailwind CSS. Aucun JavaScript n’est nécessaire. Utilise des ombres subtiles pour créer un effet extrudé à partir de l’arrière-plan. Mode sombre pris en charge avec CSS.

Ouvrir l’aperçu

                <div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-800">
  <div class="w-32 h-32 relative">
    <div class="absolute inset-0 bg-gray-300 dark:bg-gray-700 rounded-full neumorphic-shadow dark:neumorphic-shadow-dark animate-ping"></div>
    <div class="absolute inset-0 flex items-center justify-center text-gray-600 dark:text-gray-300">
      Loading...
    </div>
  </div>
</div>

<style>
  .neumorphic-shadow {
    box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
  }
  .dark .neumorphic-shadow-dark {
    box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #555555;
  }
  @keyframes ping {
    0% {
      transform: scale(0.8);
      opacity: 1;
    }
    75%, 100% {
      transform: scale(2);
      opacity: 0;
    }
  }
</style>

Composant des chargeurs

Un composant de chargeur réactif avec prise en charge du mode sombre.

Ouvrir l’aperçu

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
  <div class="w-16 h-16 border-4 border-blue-400 border-solid rounded-full animate-spin border-t-transparent"></div>
</div>

Composant des chargeurs

Un composant Loaders 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 l’aperçu

                <div class="flex flex-col items-center justify-center space-y-8 p-8 bg-gray-100 dark:bg-gray-800 min-h-screen">
    <!-- Circular Loader -->
    <div class="flex items-center justify-center">
        <div class="animate-spin rounded-full h-32 w-32 border-t-4 border-blue-500 border-solid dark:border-blue-300"></div>
    </div>

    <!-- Linear Loader -->
    <div class="w-full max-w-lg">
        <div class="h-2 bg-blue-500 rounded animate-pulse dark:bg-blue-300"></div>
    </div>

    <!-- Skeleton Loader -->
    <div class="flex space-x-4">
        <div class="h-12 w-12 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse"></div>
        <div class="flex-1 space-y-4">
            <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
            <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
            <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-4/5"></div>
        </div>
    </div>

    <!-- Image Loader -->
    <div class="w-64 h-48 bg-gray-200 dark:bg-gray-700 rounded shadow-md animate-pulse">
        <img src="https://picsum.photos/200/300" alt="Random Image" class="w-full h-full object-cover rounded" />
    </div>

    <!-- Avatar Loader -->
    <div class="flex items-center space-x-4">
        <div class="h-10 w-10 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse"></div>
        <div class="flex-1 space-y-2">
            <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
            <div class="h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-3/4"></div>
        </div>
    </div>
</div>

Composant des chargeurs

Un composant de chargeurs conçu sur la base des principes de conception matérielle avec prise en charge CSS Tailwind pour le mode sombre et les effets réactifs.

Ouvrir l’aperçu

                <div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
    <h1 class="text-2xl font-bold mb-8 text-gray-800 dark:text-white">Loading...</h1>
    <div class="flex items-center justify-center space-x-4">
        <div class="loader w-16 h-16 border-4 border-blue-500 rounded-full border-t-transparent animate-spin"></div>
        <div class="loader w-16 h-16 border-4 border-green-500 rounded-full border-t-transparent animate-spin"></div>
        <div class="loader w-16 h-16 border-4 border-red-500 rounded-full border-t-transparent animate-spin"></div>
    </div>
    <div class="mt-8">
        <img class="w-24 h-24 rounded-full shadow-lg" src="https://picsum.photos/100/100" alt="Random Image" />
    </div>
    <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">This is an example of a loading component with material design.</div>
</div>

<style>
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

    .loader {
        @apply animate-spin;
    }

    @media (prefers-color-scheme: dark) {
        /* Dark mode styles */
        .loader {
            filter: brightness(1.2);
        }
    }
</style>

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 l’aperçu

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="loader-container grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
        <div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <div class="animate-bounce w-20 h-20 bg-blue-500 rounded-full mx-auto mb-4"></div>
            <p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
        </div>
        <div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <div class="animate-bounce w-20 h-20 bg-green-500 rounded-full mx-auto mb-4"></div>
            <p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
        </div>
        <div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <div class="animate-bounce w-20 h-20 bg-red-500 rounded-full mx-auto mb-4"></div>
            <p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
        </div>
        <div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <div class="animate-bounce w-20 h-20 bg-yellow-500 rounded-full mx-auto mb-4"></div>
            <p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
        </div>
        <div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <div class="animate-bounce w-20 h-20 bg-purple-500 rounded-full mx-auto mb-4"></div>
            <p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
        </div>
        <div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <div class="animate-bounce w-20 h-20 bg-pink-500 rounded-full mx-auto mb-4"></div>
            <p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
        </div>
    </div>
</div>

Composant des chargeurs

Un composant Loaders conçu en 3D présentant des animations de chargement avec de la profondeur et de l’engagement, des effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6">Loading...</h2>
    <div class="flex space-x-4">
        <div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full animate-ping shadow-lg transform transition-transform duration-500 hover:scale-110"></div>
        <div class="w-16 h-16 bg-gradient-to-r from-green-500 to-teal-500 rounded-full animate-ping shadow-lg transform transition-transform duration-500 hover:scale-110"></div>
        <div class="w-16 h-16 bg-gradient-to-r from-red-500 to-orange-500 rounded-full animate-ping shadow-lg transform transition-transform duration-500 hover:scale-110"></div>
    </div>
    <div class="mt-8 flex flex-col items-center">
        <img src="https://picsum.photos/100/100?random=1" alt="Loading Image" class="rounded-full border-4 border-white dark:border-gray-800 shadow-lg">
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Loading user profile...</p>
    </div>
</div>

Catégories