Componenti Caricatori Componenti caricatori

Componenti caricatori

Un componente Loader progettato in stile brutalista con particolare attenzione all'interattività per siti Web aziendali/aziendali, caratterizzato da una combinazione di colori analoga e un design reattivo con supporto per la modalità scura. Il design mostra diverse animazioni del caricatore che catturano l'estetica audace e cruda del brutalismo.

Anteprima

Codice HTML

<div class="min-h-screen flex flex-col items-center justify-center bg-gray-200 dark:bg-gray-800">
    <h1 class="text-4xl font-bold mb-8 text-gray-900 dark:text-white">Loaders</h1>
    <div class="flex justify-around w-full max-w-4xl">
        <!-- Loader 1 -->
        <div class="flex flex-col items-center">
            <div class="loader bg-blue-500 dark:bg-blue-700 w-16 h-16 mb-4 rounded-full animate-bounce"></div>
            <span class="text-lg text-gray-700 dark:text-gray-300">Loader 1</span>
        </div>

        <!-- Loader 2 -->
        <div class="flex flex-col items-center">
            <div class="loader bg-green-500 dark:bg-green-700 w-16 h-16 mb-4 rounded-full animate-spin"></div>
            <span class="text-lg text-gray-700 dark:text-gray-300">Loader 2</span>
        </div>

        <!-- Loader 3 -->
        <div class="flex flex-col items-center">
            <div class="loader bg-red-500 dark:bg-red-700 w-16 h-16 mb-4 rounded-full animate-ping"></div>
            <span class="text-lg text-gray-700 dark:text-gray-300">Loader 3</span>
        </div>
    </div>
</div>

<style>
    .loader::-webkit-animation: loader; /* For Safari */
    .loader-animation {
        animation: loader 1s infinite;
    }

    @keyframes loader {
        0% { transform: scale(1); }
        50% { transform: scale(1.5); }
        100% { transform: scale(1); }
    }
</style>

Componenti correlati

Caricatore in modalità oscura

Loader o Skeleton Component per interfacce in modalità scura, con funzionalità reattive. Non è necessario alcun Javascript.

Aperto

Playful_Finance_Loader

Un componente di caricamento semplice e divertente per le interfacce finanziarie/bancarie, con neutri freddi ed elementi arrotondati. Completamente reattivo con supporto per la modalità oscura.

Aperto

Componenti caricatori

Un componente Loader progettato in 3D che mostra le animazioni di caricamento con profondità e coinvolgimento, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.

Aperto