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

ローダーコンポーネント

ビジネス/企業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>

関連コンポーネント

ローダーコンポーネント

ダークモード用に設計されたレスポンシブローダーコンポーネントで、アースカラーと適度な複雑さを特徴とし、ポートフォリオの展示に適しています。

開ける

スキューモーフィック ローダー コンポーネント

スキューモーフィックデザイン、補色配色、ダークモードサポートを備えたプロフェッショナルでレスポンシブなローダーコンポーネントで、ビジネス/企業のWebサイトに適しています。メタリックのようなコンテナ内に、繊細でアニメーション化されたローディングバーが特徴です。

開ける

ローダーコンポーネント

3D デザインされた Loaders コンポーネントで、奥行きとエンゲージメントを備えたロード アニメーション、レスポンシブ エフェクト、Tailwind CSS を使用したダーク テーマのサポートを紹介しています。

開ける