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.
HTML Code
<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>
Composants associés
Neon_Glow_Autumn_Loader
Un composant de chargeur modérément complexe avec des effets de néon/lueur et des couleurs d’automne, adapté aux systèmes de réservation et de réservation. Dispose d’un design réactif et d’une prise en charge du mode sombre.
Chargeur de jeu Memphis
Un chargeur de jeu ludique et audacieux inspiré du design de Memphis, avec des couleurs complémentaires et des formes géométriques pour une ambiance des années 80. Entièrement réactif et prend en charge le mode sombre.
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.