CCHub Logo CCHub Tailwind Collection
コンポーネント ローダー ローダーコンポーネント

ローダーコンポーネント

マテリアル デザインの原則に基づいて設計されたローダー コンポーネントで、ダーク モードとレスポンシブ エフェクトの Tailwind CSS サポートを備えています。

プレビュー

HTMLコード 

<div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
    <h1 class="text-2xl font-bold mb-8 text-gray-800 dark:text-white">Loading...</h1>
    <div class="flex items-center justify-center space-x-4">
        <div class="loader w-16 h-16 border-4 border-blue-500 rounded-full border-t-transparent animate-spin"></div>
        <div class="loader w-16 h-16 border-4 border-green-500 rounded-full border-t-transparent animate-spin"></div>
        <div class="loader w-16 h-16 border-4 border-red-500 rounded-full border-t-transparent animate-spin"></div>
    </div>
    <div class="mt-8">
        <img class="w-24 h-24 rounded-full shadow-lg" src="https://picsum.photos/100/100" alt="Random Image" />
    </div>
    <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">This is an example of a loading component with material design.</div>
</div>

<style>
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

    .loader {
        @apply animate-spin;
    }

    @media (prefers-color-scheme: dark) {
        /* Dark mode styles */
        .loader {
            filter: brightness(1.2);
        }
    }
</style>

関連コンポーネント

ローダーコンポーネント

ポートフォリオに適したトライアドカラースキームのレスポンシブマテリアルデザインローダーコンポーネントで、ダークテーマのサポートと複数のインタラクティブ要素を備えています。

開ける

Industrial_Rainbow_Healthcare_Loader

ヘルスケアアプリケーション向けのインダストリアルスタイルのローダーコンポーネントで、生の要素、マルチカラーのレインボーグラデーション、ダークモードをサポートする完全な応答性を備えています。ロード効果にシンプルなCSSアニメーションを利用しています。

開ける

Retro_Vintage_Loader_Component

セピア/ブラウンの色調のシンプルで応答性の高いレトロ/ビンテージをテーマにしたローダーコンポーネントは、イベントや会議のWebサイトに適しており、ダークモードのサポートを備えています。

開ける