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