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

ローダーコンポーネント

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

プレビュー

HTMLコード 

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6">Loading...</h2>
    <div class="flex space-x-4">
        <div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full animate-ping shadow-lg transform transition-transform duration-500 hover:scale-110"></div>
        <div class="w-16 h-16 bg-gradient-to-r from-green-500 to-teal-500 rounded-full animate-ping shadow-lg transform transition-transform duration-500 hover:scale-110"></div>
        <div class="w-16 h-16 bg-gradient-to-r from-red-500 to-orange-500 rounded-full animate-ping shadow-lg transform transition-transform duration-500 hover:scale-110"></div>
    </div>
    <div class="mt-8 flex flex-col items-center">
        <img src="https://picsum.photos/100/100?random=1" alt="Loading Image" class="rounded-full border-4 border-white dark:border-gray-800 shadow-lg">
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Loading user profile...</p>
    </div>
</div>

関連コンポーネント

ニューモーフィズムローダー

レスポンシブエフェクトとTailwind CSSを使用したダークテーマのサポートを備えたNeumorphismスタイルのローダーコンポーネント。JavaScriptは必要ありません。微妙な影を使用して、背景から押し出された効果を作成します。ダークモードはCSSでサポートされています。

開ける

ミニマリストグレースケールローダー

ミニマリスト/フラットデザイン、グレースケールの配色、レスポンシブデザインとダークテーマをサポートするビジネス/企業Webサイト向けの適度な複雑さのローダーコンポーネント。

開ける

ローダーコンポーネント

マテリアルデザインスタイルのローダーコンポーネントで、作業や製品を展示するためのレスポンシブデザインで、ダークテーマをフィーチャーし、Tailwind CSSを使用しています。

開ける