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
Componenti caricatori
Un semplice componente del caricatore in modalità scura con una combinazione di colori complementari.
Casella di selezione di caricamento in scala di grigi
Un semplice componente spinner di caricamento con colori in scala di grigi e messa a fuoco della microinterazione.
Caricatore di neumorfismo
Componente Loader con stile Neumorfismo e combinazione di colori pastello per E-commerce. Complessità semplice, reattiva con supporto per la modalità oscura. Niente JavaScript.