Komponenten suchen

Kategorien

Können

Visuelle Elemente, die darauf hinweisen, dass Inhalte geladen werden

Organische, von der Natur inspirierte Laderkomponente

Eine kontrastreiche, von der Natur inspirierte Ladekomponente, die sich für Geschäfts- und Unternehmenswebsites eignet, mit fließenden Linien und Unterstützung für den Dunkelmodus.

Offen Vorschau

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="relative flex flex-col items-center justify-center p-8 rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl bg-white dark:bg-gray-800 transform transition-all duration-300 hover:scale-[1.01]">
    <!-- Background organic shapes - Desktop/Tablet -->
    <div class="absolute -top-1/4 -left-1/4 w-1/2 h-1/2 bg-gradient-to-br from-green-300 to-blue-400 dark:from-green-600 dark:to-blue-700 rounded-full mix-blend-multiply opacity-30 blur-xl animate-blob hidden md:block"></div>
    <div class="absolute -bottom-1/4 -right-1/4 w-1/2 h-1/2 bg-gradient-to-tl from-purple-300 to-pink-400 dark:from-purple-600 dark:to-pink-700 rounded-full mix-blend-multiply opacity-30 blur-xl animate-blob animation-delay-2000 hidden md:block"></div>
    <div class="absolute top-1/4 -right-1/6 w-1/3 h-1/3 bg-gradient-to-tr from-yellow-300 to-orange-400 dark:from-yellow-600 dark:to-orange-700 rounded-full mix-blend-multiply opacity-20 blur-xl animate-blob animation-delay-4000 hidden md:block"></div>

    <!-- Main content -->
    <div class="relative z-10 flex flex-col items-center space-y-6 md:space-y-8">
      <!-- Loader Animation -->
      <div class="relative w-24 h-24 md:w-32 md:h-32">
        <!-- Outer ring -->
        <div class="absolute inset-0 rounded-full border-4 border-t-4 border-transparent border-t-blue-500 dark:border-t-blue-400 animate-spin-slow" style="border-width: 5px; border-radius: 50%;"></div>
        <!-- Inner flowing path -->
        <div class="absolute inset-0 rounded-full border-4 border-t-4 border-b-4 border-transparent border-t-green-500 border-b-purple-500 dark:border-t-green-400 dark:border-b-purple-400 animate-spin-fast animation-delay-500" style="border-width: 5px; border-radius: 50%;"></div>
        <!-- Central logo/icon placeholder -->
        <div class="absolute inset-4 md:inset-6 flex items-center justify-center bg-gray-50 dark:bg-gray-700 rounded-full shadow-inner">
          <svg class="w-10 h-10 md:w-12 md:h-12 text-gray-700 dark:text-gray-300 transform transition-transform duration-300 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v8"></path>
          </svg>
        </div>
      </div>

      <div class="text-center">
        <p class="text-lg md:text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 whitespace-nowrap overflow-hidden">
          Loading Content
        </p>
        <p class="text-sm md:text-base text-gray-600 dark:text-gray-300 max-w-xs md:max-w-md">
          Please wait while we prepare your natural and flowing experience...
        </p>
      </div>

      <!-- Progress Bar (Optional, but adds complexity) -->
      <div class="w-full max-w-xs md:max-w-sm h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
        <div class="h-full bg-gradient-to-r from-blue-500 to-green-500 dark:from-blue-400 dark:to-green-400 rounded-full animate-progress-flow" style="width: 0%;"></div>
      </div>

    </div>
  </div>
</div>

<style>
  /* Tailwind CSS @layer utilities for custom keyframes */
  @keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  @keyframes spin-fast {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  @keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
  }
  @keyframes progress-flow {
    0% { width: 0%; }
    25% { width: 40%; }
    50% { width: 70%; }
    75% { width: 90%; }
    100% { width: 100%; }
  }
  @keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
  }

  .animate-spin-slow {
    animation: spin-slow 2.5s linear infinite;
  }
  .animate-spin-fast {
    animation: spin-fast 1.5s linear infinite;
  }
  .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  .animate-progress-flow {
    animation: progress-flow 3s ease-out forwards;
  }
  .animate-blob {
    animation: blob 7s ease-in-out infinite;
  }
  .animation-delay-2000 {
    animation-delay: 2s;
  }
  .animation-delay-4000 {
    animation-delay: 4s;
  }
  .animation-delay-500 {
    animation-delay: 0.5s;
  }
</style>

Skeuomorphe Loader-Komponente

Eine professionelle, reaktionsschnelle Loader-Komponente mit einem skeuomorphen Design, komplementärem Farbschema und Unterstützung des Dunkelmodus, die für Geschäfts-/Unternehmenswebsites geeignet ist. Verfügt über eine dezente, animierte Ladeleiste in einem metallisch anmutenden Behälter.

Offen Vorschau

                <div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 transition-colors duration-500">

  <h2 class="text-3xl font-extrabold text-blue-800 dark:text-blue-200 mb-8 tracking-tight text-center">
    Loading...
  </h2>

  <!-- Skeuomorphic Loader Container -->
  <div class="relative w-full max-w-sm h-20 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-2xl shadow-[inset_2px_2px_5px_rgba(255,255,255,0.7),inset_-2px_-2px_5px_rgba(0,0,0,0.3),5px_5px_15px_rgba(0,0,0,0.2)] dark:shadow-[inset_2px_2px_5px_rgba(255,255,255,0.1),inset_-2px_-2px_8px_rgba(0,0,0,0.9),5px_5px_15px_rgba(0,0,0,0.5)] p-4 border border-solid border-gray-400 dark:border-gray-600 transition-all duration-500 animate-pulse-subtle flex flex-col justify-center items-center">
    
    <!-- Inner Bezel/Recess -->
    <div class="relative w-full h-12 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 rounded-xl shadow-[inset_1px_1px_3px_rgba(0,0,0,0.2),inset_-1px_-1px_3px_rgba(255,255,255,0.7)] dark:shadow-[inset_1px_1px_3px_rgba(255,255,255,0.05),inset_-1px_-1px_3px_rgba(0,0,0,0.9)] p-2 transition-all duration-500">
      
      <!-- Loading Bar Track -->
      <div class="w-full h-full bg-gray-300 dark:bg-gray-700 rounded-lg overflow-hidden shadow-inner-dark transition-colors duration-500">
        
        <!-- Loading Progress Bar (complementary color - often orange/yellow or green) -->
        <div class="h-full bg-gradient-to-r from-orange-400 to-amber-500 dark:from-orange-500 dark:to-amber-600 rounded-lg animate-loading-bar origin-left shadow-[0_0_8px_rgba(251,146,60,0.8)] dark:shadow-[0_0_10px_rgba(249,115,22,0.6)]" style="width: 75%;">
        </div>
      </div>
    </div>
    
    <p class="absolute -bottom-6 text-sm text-gray-600 dark:text-gray-400 font-medium whitespace-nowrap overflow-hidden">
      Preparing resources...
    </p>

  </div>

  <style>
    @keyframes loading-bar {
      0% { width: 0%; transform: translateX(-100%); opacity: 0.5; }
      25% { width: 50%; transform: translateX(0%); opacity: 0.8; }
      50% { width: 100%; opacity: 1; }
      75% { width: 50%; transform: translateX(50%); opacity: 0.8; }
      100% { width: 0%; transform: translateX(100%); opacity: 0.5; }
    }

    .animate-loading-bar {
      animation: loading-bar 2s ease-in-out infinite alternate;
    }

    @keyframes pulse-subtle {
      0%, 100% { transform: scale(1); filter: brightness(1); }
      50% { transform: scale(1.01); filter: brightness(1.05); }
    }

    .animate-pulse-subtle {
      animation: pulse-subtle 3s ease-in-out infinite;
    }

    /* Custom utility for inner dark shadow to mimic depth */
    .shadow-inner-dark {
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
    }
    .dark .shadow-inner-dark {
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8);
    }
  </style>

</div>

Glassmorphism Loader-Komponente

Eine einfache Loader-Komponente im Glassmorphism-Stil mit Komplementärfarben, die für ein Portfolio geeignet ist, mit Unterstützung für reaktionsschnelle und dunkle Modi.

Offen Vorschau

                <div class="flex h-screen items-center justify-center bg-gradient-to-br from-blue-200 via-purple-200 to-pink-200 dark:from-gray-800 dark:via-gray-900 dark:to-black">
  <div class="relative transform cursor-pointer rounded-2xl bg-white bg-opacity-10 p-8 shadow-2xl backdrop-blur-xl backdrop-filter transition-all duration-300 hover:scale-105 dark:bg-gray-700 dark:bg-opacity-10">
    <div class="absolute inset-0 -z-10 rounded-2xl bg-gradient-to-br from-blue-300 via-purple-300 to-pink-300 opacity-20 blur-xl dark:from-gray-700 dark:via-gray-800 dark:to-black"></div>
    <div class="loader-dots relative flex h-24 w-24 transform items-center justify-center space-x-2 rounded-full bg-white bg-opacity-20 shadow-inner dark:bg-gray-800 dark:bg-opacity-20">
      <div class="h-4 w-4 animate-bounce rounded-full bg-blue-600 dark:bg-blue-400"></div>
      <div class="h-4 w-4 animate-bounce rounded-full bg-purple-600 delay-75 dark:bg-purple-400"></div>
      <div class="h-4 w-4 animate-bounce rounded-full bg-pink-600 delay-150 dark:bg-pink-400"></div>
    </div>
    <p class="mt-4 text-center text-lg font-semibold text-gray-800 dark:text-gray-200">Loading Awesomeness...</p>
  </div>

  <style>
    @keyframes bounce {
      0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
      }
      50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
      }
    }

    .loader-dots div {
      animation: bounce 1s infinite;
    }

    .loader-dots div:nth-child(2) {
      animation-delay: 0.1s;
    }

    .loader-dots div:nth-child(3) {
      animation-delay: 0.2s;
    }
  </style>
</div>

Komponente für neumorphe Lader

Eine Neumorphic Loaders-Komponente mit einem analogen Farbschema, geeignet für einen Blog oder eine Content-Site, mit einem responsiven Design und Unterstützung für dunkle Themen.

Offen Vorschau

                <div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-900">
  <!-- Neumorphic Loader 1 -->
  <div class="relative w-24 h-24 m-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark flex items-center justify-center">
    <div class="absolute w-16 h-16 rounded-full border-4 border-t-4 border-blue-500 dark:border-blue-700 animate-spin"></div>
  </div>

  <!-- Neumorphic Loader 2 -->
  <div class="relative w-24 h-24 m-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark flex items-center justify-center">
    <div class="absolute w-16 h-16 rounded-full border-4 border-t-4 border-green-500 dark:border-green-700 animate-pulse"></div>
  </div>

  <!-- Neumorphic Loader 3 (for larger screens with subtle animation) -->
  <div class="hidden md:flex relative w-24 h-24 m-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark items-center justify-center">
    <div class="absolute w-16 h-16 rounded-full border-4 border-t-4 border-purple-500 dark:border-purple-700 animate-bounce-slow"></div>
  </div>
</div>

<!-- Add a style block for the custom animation, as Tailwind doesn't have a direct "bounce-slow" -->
<style>
  @keyframes bounce-slow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }

  .animate-bounce-slow {
    animation: bounce-slow 2s infinite ease-in-out;
  }

  /* Neumorphism Shadows */
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 16px #a3b1c6, -8px -8px 16px #ffffff;
  }

  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 16px #1a202c, -8px -8px 16px #4a5568;
  }
</style>

Lader-Komponente

Eine komplexe, reaktionsschnelle Loader-Komponente im Glassmorphism-Stil für den E-Commerce mit einem triadischen Farbschema und Unterstützung für den Dunkelmodus, die HTML und Tailwind CSS verwendet.

Offen Vorschau

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-8">
  <div class="relative bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl p-8 w-full max-w-2xl border border-white border-opacity-30 dark:border-gray-700 dark:border-opacity-30">
    <div class="absolute inset-0 bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 rounded-xl opacity-20 dark:from-purple-700 dark:via-pink-800 dark:to-red-800"></div>
    <div class="relative z-10 flex flex-col md:flex-row items-center justify-center space-y-8 md:space-y-0 md:space-x-8">
      <!-- Product Image Skeleton -->
      <div class="w-48 h-48 md:w-64 md:h-64 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg animate-pulse shadow-lg flex-shrink-0"></div>
      
      <!-- Product Info Skeletons -->
      <div class="flex-1 space-y-6 w-full">
        <div class="h-8 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-md w-3/4 animate-pulse"></div>
        <div class="h-6 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-md w-1/2 animate-pulse"></div>
        <div class="space-y-4">
          <div class="h-4 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-md w-full animate-pulse"></div>
          <div class="h-4 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-md w-5/6 animate-pulse"></div>
          <div class="h-4 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-md w-3/4 animate-pulse"></div>
        </div>
        <div class="h-12 bg-purple-500 bg-opacity-50 dark:bg-purple-700 dark:bg-opacity-50 rounded-lg w-full animate-bounce"></div>
      </div>
    </div>
    
    <!-- Additional Loader Elements -->
    <div class="relative z-10 mt-8 grid grid-cols-2 md:grid-cols-4 gap-6">
      <div class="h-32 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg animate-pulse"></div>
      <div class="h-32 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg animate-pulse"></div>
      <div class="h-32 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg animate-pulse"></div>
      <div class="h-32 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg animate-pulse"></div>
    </div>

    <!-- Overlay for interactivity indication -->
    <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-10 pointer-events-none rounded-xl">
      <div class="w-24 h-24 border-8 border-t-8 border-purple-400 dark:border-purple-600 border-opacity-70 dark:border-opacity-70 rounded-full animate-spin"></div>
    </div>
  </div>
</div>

Lader-Komponente

Eine komplexe, reaktionsschnelle Retro-Vintage-Loader-Komponente für Unternehmenswebsites mit lebendigen Farben und Unterstützung für den Dunkelmodus.

Offen Vorschau

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative w-64 h-64 border-4 border-purple-500 rounded-full animate-spin-slow">
    <div class="absolute inset-0 flex items-center justify-center">
      <div class="w-24 h-24 bg-pink-500 rounded-full animate-pulse-fast"></div>
    </div>
    <div class="absolute top-0 left-0 w-16 h-16 -mt-8 -ml-8 bg-yellow-400 rounded-full animate-bounce"></div>
    <div class="absolute bottom-0 right-0 w-16 h-16 -mb-8 -mr-8 bg-green-400 rounded-full animate-bounce delay-100"></div>
    <div class="absolute top-0 right-0 w-12 h-12 -mt-6 -mr-6 bg-blue-400 rounded-full animate-spin-reverse"></div>
    <div class="absolute bottom-0 left-0 w-12 h-12 -mb-6 -ml-6 bg-red-400 rounded-full animate-spin-reverse delay-100"></div>
  </div>

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

    @keyframes pulse-fast {
      0%, 100% {
        transform: scale(0.9);
        opacity: 0.7;
      }
      50% {
        transform: scale(1);
        opacity: 1;
      }
    }

    @keyframes bounce {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-20px);
      }
    }

    @keyframes spin-reverse {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(-360deg);
      }
    }

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

    .animate-pulse-fast {
      animation: pulse-fast 1.5s infinite;
    }

    .animate-bounce {
      animation: bounce 2s infinite;
    }

    .animate-spin-reverse {
      animation: spin-reverse 5s linear infinite;
    }
  </style>
</div>

Lader-Komponente

Eine reaktionsschnelle Material Design-Loader-Komponente mit triadischem Farbschema, die für ein Portfolio geeignet ist, mit Unterstützung für dunkle Themen und mehreren interaktiven Elementen.

Offen Vorschau

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">

  <!-- Component: Complex Material Design Loader for Portfolio -->
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 space-y-8 animate-fade-in">

    <!-- Header/Title Section -->
    <div class="flex items-center justify-between pb-4 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-3xl font-extrabold text-blue-600 dark:text-blue-400 capitalize">Portfolio Showcase Loading</h2>
      <div class="flex space-x-2">
        <div class="w-8 h-8 bg-purple-500 dark:bg-purple-600 rounded-full animate-pulse"></div>
        <div class="w-8 h-8 bg-green-500 dark:bg-green-600 rounded-full animate-pulse delay-75"></div>
      </div>
    </div>

    <!-- Project/Item Loading Cards (Grid Layout) -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

      <!-- Loading Card 1 -->
      <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-6 shadow-md animate-pulse-slow">
        <div class="w-full h-40 bg-gray-200 dark:bg-gray-600 rounded-md mb-4"></div>
        <div class="h-6 bg-gray-200 dark:bg-gray-600 rounded w-3/4 mb-2"></div>
        <div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-1/2"></div>
      </div>

      <!-- Loading Card 2 -->
      <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-6 shadow-md animate-pulse-slow delay-150">
        <div class="w-full h-40 bg-gray-200 dark:bg-gray-600 rounded-md mb-4"></div>
        <div class="h-6 bg-gray-200 dark:bg-gray-600 rounded w-3/4 mb-2"></div>
        <div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-1/2"></div>
      </div>

      <!-- Loading Card 3 -->
      <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-6 shadow-md animate-pulse-slow delay-300">
        <div class="w-full h-40 bg-gray-200 dark:bg-gray-600 rounded-md mb-4"></div>
        <div class="h-6 bg-gray-200 dark:bg-gray-600 rounded w-3/4 mb-2"></div>
        <div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-1/2"></div>
      </div>

      <!-- Loading Card 4 (for larger screens) -->
      <div class="hidden lg:block bg-gray-50 dark:bg-gray-700 rounded-lg p-6 shadow-md animate-pulse-slow delay-[450ms]">
        <div class="w-full h-40 bg-gray-200 dark:bg-gray-600 rounded-md mb-4"></div>
        <div class="h-6 bg-gray-200 dark:bg-gray-600 rounded w-3/4 mb-2"></div>
        <div class="h-4 bg-gray-200 dark:bg-gray-600 rounded w-1/2"></div>
      </div>

    </div>

    <!-- Progress Bar Section -->
    <div class="space-y-4">
      <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
        <div class="h-full w-2/3 bg-gradient-to-r from-blue-500 to-green-400 dark:from-blue-600 dark:to-green-500 rounded-full animate-progress-fill"></div>
      </div>
      <p class="text-center text-gray-600 dark:text-gray-400 text-sm">Loading portfolio items... Please wait.</p>
    </div>

    <!-- Call to Action / Interactive Elements (Placeholder) -->
    <div class="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-4">
      <button class="w-full sm:w-auto px-8 py-3 bg-fuchsia-500 dark:bg-fuchsia-600 text-white font-semibold rounded-full shadow-lg hover:shadow-xl transition duration-300 ease-in-out transform hover:-translate-y-1 animate-bounce-slow">
        <div class="flex items-center justify-center space-x-2">
          <svg class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
          </svg>
          <span>Processing Data</span>
        </div>
      </button>
      <button class="w-full sm:w-auto px-8 py-3 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-semibold rounded-full shadow-lg hover:shadow-xl transition duration-300 ease-in-out transform hover:-translate-y-1">
        <span class="animate-pulse">Fetching Assets</span>
      </button>
    </div>

  </div>

  <!-- Tailwind CSS Customizations (Animations) -->
  <style>
    @keyframes fade-in {
      from { opacity: 0; transform: translateY(-20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-in {
      animation: fade-in 0.8s ease-out forwards; 
    }

    @keyframes pulse-slow {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.7; }
    }
    .animate-pulse-slow {
      animation: pulse-slow 2s infinite ease-in-out;
    }

    @keyframes progress-fill {
      0% { width: 0%; }
      100% { width: 66.66%; } /* Simulating 2/3 progress */
    }
    .animate-progress-fill {
      animation: progress-fill 1.5s ease-out forwards;
    }
    
    @keyframes bounce-slow {
      0%, 100% { transform: translateY(0); }
      25% { transform: translateY(-5px); }
      50% { transform: translateY(0); }
      75% { transform: translateY(-2px); }
      100% { transform: translateY(0); }
    }
    .animate-bounce-slow {
        animation: bounce-slow 4s infinite ease-in-out;
    }

  </style>

</div>

Lader-Komponente

Eine einfache Dark-Mode-Loader-Komponente mit einem komplementären Farbschema.

Offen Vorschau

                <div class="flex items-center justify-center min-h-screen bg-gray-900">
  <div class="relative">
    <div class="h-24 w-24 rounded-full border-t-8 border-b-8 border-purple-500"></div>
    <div class="absolute top-0 left-0 h-24 w-24 rounded-full border-t-8 border-b-8 border-pink-500 animate-spin"></div>
  </div>
</div>

Lader-Komponente

Eine Loaders-Komponente, die im brutalistischen Stil mit Schwerpunkt auf Interaktivität für Geschäfts-/Unternehmenswebsites gestaltet wurde, mit einem analogen Farbschema und responsivem Design mit Unterstützung des Dunkelmodus. Das Design zeigt verschiedene Ladeanimationen, die die kühne und rohe Ästhetik des Brutalismus einfangen.

Offen Vorschau

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

Lader-Komponente

Eine Laderkomponente im Material Design-Stil mit einem responsiven Design für die Präsentation von Arbeiten oder Produkten, mit einem dunklen Design und unter Verwendung von Tailwind CSS.

Offen Vorschau

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