ローダーコンポーネント
ビジネス/企業Webサイトのインタラクティブ性に焦点を当てたブルータリズムスタイルで設計されたローダーコンポーネントで、類似の配色とダークモードをサポートするレスポンシブデザインが特徴です。このデザインは、ブルータリズムの大胆で生々しい美学を捉えたさまざまなローダーアニメーションを紹介しています。
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>