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