Composant des chargeurs
Un composant Loaders de style Material Design avec un design réactif pour présenter du travail ou des produits, avec un thème sombre et utilisant Tailwind CSS.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
<div class="w-full max-w-md p-6 border border-gray-300 rounded-lg shadow-lg dark:border-gray-700 dark:shadow-gray-800 bg-white dark:bg-gray-800">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 text-center mb-4">Loading Portfolio...</h2>
<div class="space-y-6">
<!-- Loader Item 1 -->
<div class="flex items-center space-x-4 animate-pulse">
<img class="h-16 w-16 rounded-full bg-gray-300 dark:bg-gray-700" src="https://picsum.photos/200/200" alt="Project Thumbnail" />
<div class="flex-1">
<div class="h-4 bg-gray-300 dark:bg-gray-700 rounded w-3/4 mb-2"></div>
<div class="h-3 bg-gray-300 dark:bg-gray-700 rounded w-1/2"></div>
</div>
</div>
<!-- Loader Item 2 -->
<div class="flex items-center space-x-4 animate-pulse">
<img class="h-16 w-16 rounded-full bg-gray-300 dark:bg-gray-700" src="https://picsum.photos/201/200" alt="Project Thumbnail" />
<div class="flex-1">
<div class="h-4 bg-gray-300 dark:bg-gray-700 rounded w-3/4 mb-2"></div>
<div class="h-3 bg-gray-300 dark:bg-gray-700 rounded w-1/2"></div>
</div>
</div>
<!-- Loader Item 3 -->
<div class="flex items-center space-x-4 animate-pulse">
<img class="h-16 w-16 rounded-full bg-gray-300 dark:bg-gray-700" src="https://picsum.photos/202/200" alt="Project Thumbnail" />
<div class="flex-1">
<div class="h-4 bg-gray-300 dark:bg-gray-700 rounded w-3/4 mb-2"></div>
<div class="h-3 bg-gray-300 dark:bg-gray-700 rounded w-1/2"></div>
</div>
</div>
<!-- Loader Item 4 -->
<div class="flex items-center space-x-4 animate-pulse">
<img class="h-16 w-16 rounded-full bg-gray-300 dark:bg-gray-700" src="https://picsum.photos/203/200" alt="Project Thumbnail" />
<div class="flex-1">
<div class="h-4 bg-gray-300 dark:bg-gray-700 rounded w-3/4 mb-2"></div>
<div class="h-3 bg-gray-300 dark:bg-gray-700 rounded w-1/2"></div>
</div>
</div>
</div>
</div>
</div>
Composants associés
NeonGlowWeatherLoader
Un composant simple et réactif avec des effets de néon, une base en noir et blanc et une couleur d’accentuation vibrante, y compris la prise en charge du mode sombre.
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.
Chargeur de neumorphisme
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.