加载器

凹面加载器

一个简单的新拟态加载器组件，适用于支持深色模式的电子商务网站。

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

拟物化加载器

具有新拟态风格和柔和色调的加载组件，专为电子商务设计。简单复杂，响应式，支持暗黑模式。不使用JavaScript。

打开预览

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
  <div class="loader ease-linear rounded-full border-8 border-t-8 border-gray-200 dark:border-gray-700 h-32 w-32 relative" style="border-top-color: #a78bfa;">
    <div class="absolute inset-0 flex items-center justify-center text-gray-500 dark:text-gray-400 text-2xl">
      Loading...
    </div>
  </div>
</div>

<style>
  .loader {
    animation: spin 2s linear infinite;
    box-shadow: 8px 8px 16px #a7a7a7, -8px -8px 16px #ffffff; /* Neumorphism effect */
  }

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

  .dark .loader {
     box-shadow: 8px 8px 16px #4b5563, -8px -8px 16px #1f2937; /* Neumorphism effect for dark mode */
  }
</style>

加载器组件

一个为暗模式设计的响应式加载器组件，具有地球色调和适度复杂性，适合展示作品集。

打开预览

                <div class="min-h-screen flex flex-col items-center justify-center bg-gray-900 text-gray-100">
    <h1 class="text-3xl font-bold mb-6">Loading...</h1>
    <div class="flex space-x-4">
        <!-- Loader 1 -->
        <div class="flex flex-col items-center">
            <div class="w-16 h-16 rounded-full bg-earth-700 animate-bounce">  
                <img class="w-full h-full rounded-full" src="https://picsum.photos/seed/1/100" alt="Loading Image 1">
            </div>
            <p class="mt-2">Loading content...</p>
        </div>
        
        <!-- Loader 2 -->
        <div class="flex flex-col items-center">
            <div class="w-16 h-16 rounded-full bg-earth-600 animate-bounce">  
                <img class="w-full h-full rounded-full" src="https://picsum.photos/seed/2/100" alt="Loading Image 2">
            </div>
            <p class="mt-2">Almost there...</p>
        </div>
        
        <!-- Loader 3 -->
        <div class="flex flex-col items-center">
            <div class="w-16 h-16 rounded-full bg-earth-500 animate-bounce">  
                <img class="w-full h-full rounded-full" src="https://picsum.photos/seed/3/100" alt="Loading Image 3">
            </div>
            <p class="mt-2">Just a moment...</p>
        </div>
    </div>
    <div class="mt-8 p-4 rounded-lg bg-gray-800 shadow-lg">
        <h2 class="text-xl font-semibold">Featured Projects</h2>
        <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="p-4 rounded-lg bg-earth-700 shadow hover:shadow-xl transition-shadow duration-300">
                <img src="https://picsum.photos/seed/4/500/300" alt="Project 1" class="rounded-lg">
                <h3 class="mt-2 text-lg font-semibold">Project Title 1</h3>
                <p class="text-gray-300">Short description of the project.</p>
            </div>
            <div class="p-4 rounded-lg bg-earth-700 shadow hover:shadow-xl transition-shadow duration-300">
                <img src="https://picsum.photos/seed/5/500/300" alt="Project 2" class="rounded-lg">
                <h3 class="mt-2 text-lg font-semibold">Project Title 2</h3>
                <p class="text-gray-300">Short description of the project.</p>
            </div>
            <div class="p-4 rounded-lg bg-earth-700 shadow hover:shadow-xl transition-shadow duration-300">
                <img src="https://picsum.photos/seed/6/500/300" alt="Project 3" class="rounded-lg">
                <h3 class="mt-2 text-lg font-semibold">Project Title 3</h3>
                <p class="text-gray-300">Short description of the project.</p>
            </div>
            <div class="p-4 rounded-lg bg-earth-700 shadow hover:shadow-xl transition-shadow duration-300">
                <img src="https://picsum.photos/seed/7/500/300" alt="Project 4" class="rounded-lg">
                <h3 class="mt-2 text-lg font-semibold">Project Title 4</h3>
                <p class="text-gray-300">Short description of the project.</p>
            </div>
        </div>
    </div>
</div>

暗黑模式加载器

用于深色模式界面的加载器或骨架组件，具有响应功能。无需 JavaScript。

打开预览

                <div class="flex flex-col gap-4 w-full">
  <div class="flex items-center justify-between">
    <div>
      <div class="h-2 w-24 bg-gray-500 rounded"></div>
      <div class="h-2 w-16 bg-gray-500 mt-2 rounded"></div>
    </div>
    <div class="h-10 w-10 bg-gray-500 rounded-full"></div>
  </div>
  <div class="space-y-2">
    <div class="h-2 w-full bg-gray-500 rounded"></div>
    <div class="h-2 w-full bg-gray-500 rounded"></div>
    <div class="h-2 w-full bg-gray-500 rounded"></div>
    <div class="h-2 w-1/2 bg-gray-500 rounded"></div>
  </div>
</div>

拟物加载器

一个神经形风格的加载器组件，具有响应效果和暗主题支持，使用Tailwind CSS。不需要JavaScript。使用微妙的阴影创建从背景凸出效应。支持CSS的暗模式。

打开预览

                <div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-800">
  <div class="w-32 h-32 relative">
    <div class="absolute inset-0 bg-gray-300 dark:bg-gray-700 rounded-full neumorphic-shadow dark:neumorphic-shadow-dark animate-ping"></div>
    <div class="absolute inset-0 flex items-center justify-center text-gray-600 dark:text-gray-300">
      Loading...
    </div>
  </div>
</div>

<style>
  .neumorphic-shadow {
    box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
  }
  .dark .neumorphic-shadow-dark {
    box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #555555;
  }
  @keyframes ping {
    0% {
      transform: scale(0.8);
      opacity: 1;
    }
    75%, 100% {
      transform: scale(2);
      opacity: 0;
    }
  }
</style>

加载器组件

一个具有暗模式支持的响应式加载器组件。

打开预览

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

加载器组件

一个以Material Design风格设计的加载器组件，具有响应式效果和深色主题支持，使用Tailwind CSS。

打开预览

                <div class="flex flex-col items-center justify-center space-y-8 p-8 bg-gray-100 dark:bg-gray-800 min-h-screen">
    <!-- Circular Loader -->
    <div class="flex items-center justify-center">
        <div class="animate-spin rounded-full h-32 w-32 border-t-4 border-blue-500 border-solid dark:border-blue-300"></div>
    </div>

    <!-- Linear Loader -->
    <div class="w-full max-w-lg">
        <div class="h-2 bg-blue-500 rounded animate-pulse dark:bg-blue-300"></div>
    </div>

    <!-- Skeleton Loader -->
    <div class="flex space-x-4">
        <div class="h-12 w-12 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse"></div>
        <div class="flex-1 space-y-4">
            <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
            <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
            <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-4/5"></div>
        </div>
    </div>

    <!-- Image Loader -->
    <div class="w-64 h-48 bg-gray-200 dark:bg-gray-700 rounded shadow-md animate-pulse">
        <img src="https://picsum.photos/200/300" alt="Random Image" class="w-full h-full object-cover rounded" />
    </div>

    <!-- Avatar Loader -->
    <div class="flex items-center space-x-4">
        <div class="h-10 w-10 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse"></div>
        <div class="flex-1 space-y-2">
            <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
            <div class="h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-3/4"></div>
        </div>
    </div>
</div>

加载器组件

一个基于材料设计原则的加载器组件，支持深色模式和响应效果，兼容 Tailwind CSS。

打开预览

                <div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
    <h1 class="text-2xl font-bold mb-8 text-gray-800 dark:text-white">Loading...</h1>
    <div class="flex items-center justify-center space-x-4">
        <div class="loader w-16 h-16 border-4 border-blue-500 rounded-full border-t-transparent animate-spin"></div>
        <div class="loader w-16 h-16 border-4 border-green-500 rounded-full border-t-transparent animate-spin"></div>
        <div class="loader w-16 h-16 border-4 border-red-500 rounded-full border-t-transparent animate-spin"></div>
    </div>
    <div class="mt-8">
        <img class="w-24 h-24 rounded-full shadow-lg" src="https://picsum.photos/100/100" alt="Random Image" />
    </div>
    <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">This is an example of a loading component with material design.</div>
</div>

<style>
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

    .loader {
        @apply animate-spin;
    }

    @media (prefers-color-scheme: dark) {
        /* Dark mode styles */
        .loader {
            filter: brightness(1.2);
        }
    }
</style>

加载器组件

一个采用材料设计风格的加载器组件，具有响应效果和使用 Tailwind CSS 支持黑暗主题。

打开预览

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="loader-container grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
        <div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <div class="animate-bounce w-20 h-20 bg-blue-500 rounded-full mx-auto mb-4"></div>
            <p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
        </div>
        <div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <div class="animate-bounce w-20 h-20 bg-green-500 rounded-full mx-auto mb-4"></div>
            <p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
        </div>
        <div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <div class="animate-bounce w-20 h-20 bg-red-500 rounded-full mx-auto mb-4"></div>
            <p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
        </div>
        <div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <div class="animate-bounce w-20 h-20 bg-yellow-500 rounded-full mx-auto mb-4"></div>
            <p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
        </div>
        <div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <div class="animate-bounce w-20 h-20 bg-purple-500 rounded-full mx-auto mb-4"></div>
            <p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
        </div>
        <div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <div class="animate-bounce w-20 h-20 bg-pink-500 rounded-full mx-auto mb-4"></div>
            <p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
        </div>
    </div>
</div>

加载器组件

一个3D设计的加载器组件，展示具有深度和参与感的加载动画，具有响应效果和深色主题支持，使用Tailwind CSS。

打开预览

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6">Loading...</h2>
    <div class="flex space-x-4">
        <div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full animate-ping shadow-lg transform transition-transform duration-500 hover:scale-110"></div>
        <div class="w-16 h-16 bg-gradient-to-r from-green-500 to-teal-500 rounded-full animate-ping shadow-lg transform transition-transform duration-500 hover:scale-110"></div>
        <div class="w-16 h-16 bg-gradient-to-r from-red-500 to-orange-500 rounded-full animate-ping shadow-lg transform transition-transform duration-500 hover:scale-110"></div>
    </div>
    <div class="mt-8 flex flex-col items-center">
        <img src="https://picsum.photos/100/100?random=1" alt="Loading Image" class="rounded-full border-4 border-white dark:border-gray-800 shadow-lg">
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Loading user profile...</p>
    </div>
</div>

类别