组件 装载 机 加载器组件

加载器组件

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

预览

HTML 代码

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

相关组件

孟菲斯游戏加载器

一款俏皮而大胆的游戏加载器,灵感来自孟菲斯设计,采用互补色和几何形状,营造出 80 年代的氛围。完全响应并支持深色模式。

打开

Loaders 组件

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

打开

新拟态加载器

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

打开