搜索组件

类别

组件加载器

加载器

指示内容正在加载的视觉元素

Neon_Glow_Autumn_Loader

一个中等复杂的加载器组件，具有霓虹灯/发光效果和秋天的色彩，适用于预订和预订系统。具有响应式设计和深色模式支持。

                <div class="flex items-center justify-center min-h-screen bg-neutral-100 dark:bg-gray-900 p-4">
  <div class="max-w-md w-full bg-orange-50 dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden p-8 border border-orange-200 dark:border-gray-700 relative">
    <!-- Glow effect overlay - Bottom left -->
    <div class="absolute -left-10 -bottom-10 w-48 h-48 bg-orange-300 dark:bg-orange-800 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-pulse-slow-1 z-0"></div>
    <!-- Glow effect overlay - Top right -->
    <div class="absolute -right-10 -top-10 w-48 h-48 bg-burgundy-300 dark:bg-burgundy-800 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-pulse-slow-2 z-0"></div>

    <div class="relative z-10 flex flex-col items-center space-y-8">
      <div class="relative w-24 h-24">
        <!-- Outer ring with glow -->
        <div class="absolute inset-0 rounded-full border-4 border-transparent animate-spin-slow-fast"
             style="border-top-color: #f97316; border-right-color: #f97316; filter: drop-shadow(0 0 8px #f97316) drop-shadow(0 0 15px #f97316);"></div>
        <!-- Inner ring with glow -->
        <div class="absolute inset-3 rounded-full border-4 border-transparent animate-spin-slow-fast-reverse"
             style="border-bottom-color: #b91c1c; border-left-color: #b91c1c; filter: drop-shadow(0 0 8px #b91c1c) drop-shadow(0 0 15px #b91c1c);"></div>
        <!-- Center icon placeholder -->
        <div class="flex items-center justify-center w-full h-full rounded-full bg-gradient-to-br from-orange-400 to-burgundy-600 dark:from-orange-700 dark:to-red-900 border-2 border-orange-300 dark:border-red-800">
          <svg class="w-10 h-10 text-white dark:text-gray-100 drop-shadow-[0_0_5px_rgba(255,165,0,0.8)]" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path>
          </svg>
        </div>
      </div>

      <div class="text-center space-y-3">
        <h2 class="text-2xl sm:text-3xl font-extrabold text-orange-900 dark:text-orange-200 tracking-tight glow-text-orange">
          Confirming Your Reservation...
        </h2>
        <p class="text-sm sm:text-base text-gray-700 dark:text-gray-400 max-w-xs mx-auto">
          Please wait a moment while we secure your booking. This may take a few seconds.
        </p>
      </div>

      <!-- Progress dots -->
      <div class="flex space-x-2">
        <div class="size-3 rounded-full bg-orange-500 dark:bg-orange-600 animate-bounce-delay-1 shadow-md glow-dot"></div>
        <div class="size-3 rounded-full bg-red-600 dark:bg-red-700 animate-bounce-delay-2 shadow-md glow-dot"></div>
        <div class="size-3 rounded-full bg-orange-500 dark:bg-orange-600 animate-bounce-delay-3 shadow-md glow-dot"></div>
      </div>

      <button type="button" class="bg-orange-600 hover:bg-orange-700 dark:bg-orange-700 dark:hover:bg-orange-800 text-white font-semibold py-2 px-6 rounded-lg text-sm transition duration-300 ease-in-out transform hover:scale-105 active:scale-95 shadow-lg relative overflow-hidden group border border-orange-500 dark:border-red-900">
        <span class="absolute top-0 left-0 w-full h-full bg-orange-700 dark:bg-red-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300 blend-hard-light-glow"></span>
        <span class="relative z-10 glow-text-button">Cancel Booking</span>
      </button>

      <p class="text-xs text-gray-500 dark:text-gray-600 mt-4">
        Status: <span class="font-medium text-gray-600 dark:text-gray-500">Processing...</span>
      </p>
    </div>
  </div>

  <!-- Custom Tailwind CSS Keyframes & Colors -->
  <style>
    @keyframes spin-slow-fast {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    @keyframes spin-slow-fast-reverse {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(-360deg); }
    }
    @keyframes bounce-delay {
      0%, 80%, 100% { transform: translateY(0); }
      40% { transform: translateY(-8px); }
    }
    @keyframes pulse-slow {
      0%, 100% { transform: scale(1); opacity: 0.3; }
      50% { transform: scale(1.1); opacity: 0.5; }
    }

    .animate-spin-slow-fast {
      animation: spin-slow-fast 1.8s linear infinite;
    }
    .animate-spin-slow-fast-reverse {
      animation: spin-slow-fast-reverse 2s linear infinite;
    }
    .animate-bounce-delay-1 {
      animation: bounce-delay 1s infinite;
    }
    .animate-bounce-delay-2 {
      animation: bounce-delay 1s infinite 0.2s;
    }
    .animate-bounce-delay-3 {
      animation: bounce-delay 1s infinite 0.4s;
    }
    .animate-pulse-slow-1 {
      animation: pulse-slow 5s infinite ease-in-out;
    }
    .animate-pulse-slow-2 {
      animation: pulse-slow 6s infinite ease-in-out 1s;
    }

    /* Custom Glow effects for text and buttons */
    .glow-text-orange {
      text-shadow: 0 0 5px rgba(255, 100, 0, 0.7), 0 0 10px rgba(255, 100, 0, 0.5);
    }
    .dark .glow-text-orange {
      text-shadow: 0 0 8px rgba(255, 165, 0, 0.9), 0 0 16px rgba(255, 165, 0, 0.6);
    }
    .glow-text-button {
      text-shadow: 0 0 3px rgba(255, 255, 255, 0.8), 0 0 6px rgba(255, 255, 255, 0.5);
    }
    .glow-dot {
      filter: drop-shadow(0 0 4px rgba(255, 165, 0, 0.7));
    }
    .dark .glow-dot {
      filter: drop-shadow(0 0 6px rgba(255, 165, 0, 0.9));
    }

    /* Custom colors for Autumn theme (if not already in Tailwind config) */
    .bg-burgundy-300 { background-color: #e49a88; }
    .bg-burgundy-800 { background-color: #6a053c; }
    .bg-burgundy-600 { background-color: #8c0f4f; }
    .text-burgundy-900 { color: #4e0329; }
    .dark\:bg-red-900 { background-color: #7f1d1d; }
    .dark\:border-red-900 { border-color: #7f1d1d; }
    .dark\:text-red-900 { color: #7f1d1d; }
    .dark\:border-red-800 { border-color: #991b1b; }
    .dark\:bg-red-800 { background-color: #991b1b; }

    /* Adjust mix-blend-mode for dark theme better visual */
    .dark .mix-blend-multiply {
      mix-blend-mode: screen;
    }

  </style>
</div>

OrganicNatureLoaderComponent （有机自然加载器组件）

一个中等复杂度的加载器组件，采用有机/自然风格的设计，使用复古/复古调色板，适合博客/内容消费。包括完全响应和深色模式支持。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-amber-50 dark:bg-stone-900 p-4 font-sans">
  <div class="relative w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-amber-100 dark:bg-stone-800 rounded-3xl p-6 sm:p-8 md:p-10 shadow-xl overflow-hidden animate-fade-in">
    <div class="absolute inset-0 bg-gradient-to-br from-amber-200 via-yellow-200 to-green-200 dark:from-stone-700 dark:via-stone-600 dark:to-gray-700 opacity-50 dark:opacity-30 blur-2xl pointer-events-none transform -rotate-6 scale-110"></div>
    <div class="relative z-10 flex flex-col items-center space-y-8">
      <h1 class="text-2xl sm:text-3xl md:text-4xl font-extrabold text-amber-800 dark:text-stone-300 tracking-tight text-center">
        <span class="block">Foraging for Content...</span>
      </h1>

      <div class="relative w-24 h-24 sm:w-28 sm:h-28 flex items-center justify-center">
        <div class="absolute w-full h-full rounded-full border-4 border-t-4 border-amber-400 dark:border-stone-500 border-opacity-50 dark:border-opacity-50 animate-spin-slow origin-center ease-in-out"></div>
        <div class="absolute w-4/5 h-4/5 rounded-full border-4 border-b-4 border-amber-600 dark:border-stone-400 border-opacity-70 dark:border-opacity-70 animate-spin origin-center ease-in-out delay-100"></div>
        <div class="absolute w-3/5 h-3/5 rounded-full border-4 border-r-4 border-amber-700 dark:border-stone-300 animate-spin-reverse origin-center ease-in-out delay-200"></div>
        <svg class="w-10 h-10 sm:w-12 sm:h-12 text-amber-700 dark:text-stone-300" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
        </svg>
      </div>

      <p class="text-lg sm:text-xl text-amber-700 dark:text-stone-400 text-center max-w-sm leading-relaxed">
        Connecting to nature's network to gather insights...
      </p>

      <div class="w-full flex flex-col md:flex-row items-center justify-between gap-4 pt-4">
        <div class="flex flex-col items-center md:items-start text-center md:text-left">
          <p class="text-sm text-amber-600 dark:text-stone-500">Expected load time:</p>
          <p class="text-base font-medium text-amber-700 dark:text-stone-400">15-30 seconds</p>
        </div>
        <button class="px-6 py-3 bg-amber-500 hover:bg-amber-600 dark:bg-stone-500 dark:hover:bg-stone-600 text-white font-semibold rounded-full shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-amber-400 dark:focus:ring-stone-400 focus:ring-opacity-75">
          Refresh Feed
        </button>
      </div>
    </div>
  </div>

  <style>
    @keyframes spin-slow {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    @keyframes spin-reverse {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(-360deg); }
    }
    @keyframes fade-in {
      0% { opacity: 0; transform: translateY(20px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    .animate-spin-slow {
      animation: spin-slow 2s linear infinite;
    }
    .animate-spin-reverse {
      animation: spin-reverse 1.5s linear infinite;
    }
    .animate-fade-in {
      animation: fade-in 0.8s ease-out forwards;
    }
  </style>
</div>

有机自然启发的 Loader 组件

适用于商业和企业网站的高对比度、自然灵感加载组件，具有流畅的线条和深色模式支持。

打开预览

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

拟物化 Loader 组件

一个专业的响应式加载程序组件，具有拟物化设计、互补配色方案和深色模式支持，适用于商业/公司网站。在类似金属的容器内具有一个微妙的动画加载条。

打开预览

                <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 加载器组件

一个简单的 glassmorphism 风格的加载器组件，具有互补色，适用于投资组合，具有响应式和深色模式支持。

打开预览

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

Neumorphic Loaders 组件

具有类似配色方案的 Neumorphic Loaders 组件，适用于博客或内容网站，具有响应式设计和深色主题支持。

打开预览

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

Loaders 组件

一个复杂的、响应式的、用于电子商务的 Glassmorphism 风格的加载器组件，具有三元配色方案和深色模式支持，使用 HTML 和 Tailwind CSS。

打开预览

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

Loaders 组件

一个复杂、响应迅速、复古的加载程序组件，适用于商业网站，具有鲜艳的色彩和深色模式支持。

打开预览

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

Loaders 组件

一个响应式 Material Design 加载器组件，具有三元配色方案，适用于投资组合，具有深色主题支持和多个互动元素。

打开预览

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

Loaders 组件

具有互补配色方案的简单 dark mode 加载器组件。

打开预览

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