Componentes de búsqueda

Categorías

Cargadoras

Elementos visuales que indican que el contenido se está cargando

Componente de cargadores

Un componente de cargadores diseñado en un estilo brutalista con un enfoque en la interactividad para sitios web comerciales / corporativos, con un esquema de color análogo y un diseño receptivo con soporte para modo oscuro. El diseño muestra diferentes animaciones de cargadores que capturan la estética audaz y cruda del brutalismo.

Abrir Vista previa

                <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>

Componente de cargadores

Un componente de cargadores de estilo Material Design con un diseño responsivo para mostrar trabajos o productos, con un tema oscuro y usando Tailwind CSS.

Abrir Vista previa

                <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>

Componente de cargadores

Un componente de cargadores simple diseñado en estilo Neumorphism para el consumo de contenido con un esquema de color complementario.

Abrir Vista previa

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">
    <div class="bg-white dark:bg-gray-700 shadow-neumorphism rounded-lg p-6 w-80">
        <div class="animate-pulse">
            <div class="h-4 bg-gray-300 dark:bg-gray-600 rounded w-3/4 mb-4"></div>
            <div class="h-4 bg-gray-300 dark:bg-gray-600 rounded w-full mb-4"></div>
            <div class="h-4 bg-gray-300 dark:bg-gray-600 rounded w-5/6 mb-4"></div>
            <div class="h-4 bg-gray-300 dark:bg-gray-600 rounded w-4/5"></div>
        </div>
    </div>
    <div class="mt-8 flex flex-col items-center">
        <img src="https://picsum.photos/100" class="rounded-full shadow-neumorphism" alt="Random image cat">
        <div class="mt-2 font-semibold text-lg text-gray-800 dark:text-gray-200">Loading...</div>
    </div>
</div>
<style>
    .shadow-neumorphism {
        box-shadow: 8px 8px 16px rgba(0,0,0,0.2), 
                    -8px -8px 16px rgba(255, 255, 255, 0.7);
    }
</style>

Spinner de carga en escala de grises

Un componente giratorio de carga simple con colores en escala de grises y enfoque de microinteracción.

Abrir Vista previa

                <div class="flex items-center justify-center h-screen bg-white dark:bg-gray-900">
  <div class="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-gray-900 dark:border-gray-100"></div>
</div>

Componente de cargadores

Un componente de cargadores simple diseñado para interfaces de redes sociales en modo oscuro que utilizan un esquema de color monocromático.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-800">
    <div class="flex">
        <div class="loader bg-gray-600 dark:bg-gray-400 rounded-full w-16 h-16 animate-bounce mr-4"></div>
        <div class="loader bg-gray-600 dark:bg-gray-400 rounded-full w-16 h-16 animate-bounce"></div>
    </div>
    <div class="flex flex-col items-center ml-4">
        <h2 class="text-gray-200 dark:text-gray-100 text-xl mb-2">Loading...</h2>
        <div class="flex space-x-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-gray-600 dark:border-gray-400">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-gray-600 dark:border-gray-400">
        </div>
    </div>
</div>
<style>
    @keyframes bounce {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-15px);
        }
    }
</style>

Componente de cargadores

Un componente de cargadores diseñado con un estilo esqueuomórfico que utiliza un esquema de color triádico para un blog o sitio web centrado en el contenido. Cuenta con un diseño simple apropiado para el consumo de contenido, incorporando soporte para el modo oscuro.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="loader">
        <div class="rounded-lg border-4 border-blue-500 dark:border-blue-300 h-16 w-16 animate-spin"></div>
        <div class="mt-5 text-center">
            <img class="rounded-full h-12 w-12 mx-auto" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" />
            <div class="text-lg font-bold text-gray-800 dark:text-gray-200">Loading Content...</div>
        </div>
    </div>
</div>
<style>
    .loader {
        background: linear-gradient(145deg, #e6e6e6, #f0f0f0);
        border-radius: 15px;
        box-shadow: 20px 20px 60px #d1d1d1,
                    -20px -20px 60px #ffffff;
        padding: 20px;
    }
</style>

Cargador de neumorfismo

Un componente de carga de neumorfismo simple con un esquema de color monocromático para un portafolio, con diseño receptivo y soporte para temas oscuros.

Abrir Vista previa

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
  <div class="flex space-x-2 animate-pulse">
    <div class="w-4 h-4 bg-gray-400 rounded-full dark:bg-gray-600 shadow-inner dark:shadow-inner-dark"></div>
    <div class="w-4 h-4 bg-gray-400 rounded-full dark:bg-gray-600 shadow-inner dark:shadow-inner-dark"></div>
    <div class="w-4 h-4 bg-gray-400 rounded-full dark:bg-gray-600 shadow-inner dark:shadow-inner-dark"></div>
  </div>
</div>

Cargador de neumorfismo

Componente del cargador de neumorfismo con colores complementarios

Abrir Vista previa

                <div class="flex justify-center items-center h-screen bg-gray-200 dark:bg-gray-800">
  <div class="relative w-24 h-24">
    <div class="absolute top-0 left-0 w-full h-full rounded-full bg-gray-200 dark:bg-gray-700" style="box-shadow: inset 5px 5px 10px #b3b3b3, inset -5px -5px 10px #ffffff; dark:box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #626262;"></div>
    <div class="absolute top-0 left-0 w-full h-full rounded-full bg-gradient-to-r from-blue-500 to-purple-600 animate-spin" style="filter: blur(10px);"></div>
    <div class="absolute top-0 left-0 w-full h-full rounded-full border-4 border-transparent border-t-blue-500 border-b-purple-600 animate-spin"></div>
    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-gray-600 dark:text-gray-300 text-xl font-semibold">Loading</div>
  </div>
</div>

MinimalistaCargador de escala de grises

Diseño minimalista / plano, combinación de colores en escala de grises, componente de cargador de complejidad moderada para sitios web comerciales / corporativos con diseño receptivo y soporte de temas oscuros.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="w-16 h-16 border-4 border-gray-300 border-t-gray-900 rounded-full animate-spin dark:border-gray-700 dark:border-t-gray-100"></div>
</div>

Cargador neumórfico

Un componente de cargador neumórfico simple para sitios de comercio electrónico con soporte para modo oscuro.

Abrir Vista previa

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
  <div class="w-64 h-64">
    <div class="relative w-full h-full rounded-lg bg-gray-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
        <div class="w-16 h-16 border-4 border-blue-500 border-solid rounded-full animate-spin border-t-transparent"></div>
      </div>
      <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
        <div class="w-10 h-10 border-4 border-purple-500 border-solid rounded-full animate-spin border-t-transparent"></div>
      </div>
    </div>
  </div>
</div>

<style>
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.shadow-neumorphic-light {
  box-shadow: 7px 7px 14px #b0b0b0, -7px -7px 14px #ffffff;
}

.dark .shadow-neumorphic-dark {
  box-shadow: 7px 7px 14px #4a4a4a, -7px -7px 14px #363636;
}
</style>