加载器

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>

Loaders 组件

以粗野主义风格设计的 Loaders 组件，侧重于商业/公司网站的交互性，具有类似的配色方案和响应式设计，并支持深色模式。该设计展示了不同的加载器动画，这些动画捕捉了粗野主义的大胆和原始美学。

打开预览

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

加载器组件

一个 Material Design 样式的 Loaders 组件，具有响应式设计，用于展示工作或产品，具有深色主题并使用 Tailwind CSS。

打开预览

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

加载器组件

一个简单的 loaders 组件，以 Neumorphism 风格设计，用于内容消费，具有互补的配色方案。

打开预览

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

灰阶加载旋转器

一个简单的加载旋转器组件，采用灰度色彩，侧重于微互动。

打开预览

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

加载器组件

一个简单的加载器组件，专为使用单色配色方案的深色模式社交媒体界面设计。

打开预览

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

加载器组件

一个针对博客或内容网站设计的加载组件，采用拟物风格和三元色彩方案。它具有适合内容消费的简单布局，并包含深色模式支持。

打开预览

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

新拟态加载器

一个简单的新拟态加载器组件，具有单色调色方案，适用于投资组合，支持响应式设计和黑暗主题。

打开预览

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

新拟态加载器

具有互补颜色的 Neumorphism 加载器组件

打开预览

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

极简灰度加载器

一个极简/平面设计，使用灰度配色方案，适合商业/企业网站的中等复杂性加载器组件，支持响应式设计和暗色主题。

打开预览

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

类别