Componenti caricatori
Un componente Loaders in stile Material Design con un design reattivo per mostrare lavori o prodotti, con un tema scuro e utilizzando Tailwind CSS.
Codice HTML
<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>
Componenti correlati
Componente Glassmorphism Loader
Un semplice componente loader in stile glassmorphism con colori complementari, adatto per un portfolio, con supporto per la modalità reattiva e scura.
Neon_Glow_Autumn_Loader
Un componente loader moderatamente complesso con effetti neon/bagliore e colori autunnali, adatto per sistemi di prenotazione e prenotazione. Presenta un design reattivo e il supporto della modalità scura.
Componenti caricatori
Un componente Loader progettato con uno stile scheumorfico utilizzando una combinazione di colori triadica per un blog o un sito Web incentrato sui contenuti. È dotato di un layout semplice appropriato per il consumo di contenuti, che incorpora il supporto della modalità oscura.