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

ローダーコンポーネント

補色スキームのシンプルなダークモードローダーコンポーネント。

プレビュー

HTMLコード 

<div class="flex items-center justify-center min-h-screen bg-gray-900">
  <div class="relative">
    <div class="h-24 w-24 rounded-full border-t-8 border-b-8 border-purple-500"></div>
    <div class="absolute top-0 left-0 h-24 w-24 rounded-full border-t-8 border-b-8 border-pink-500 animate-spin"></div>
  </div>
</div>

関連コンポーネント

ローダーコンポーネント

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

開ける

Organic_Nature_Inspired_Food_Loader

食品/レストランのWebサイト向けの適度な複雑さのローダーコンポーネントで、落ち着いた色とダークモードのサポートを含む完全な応答性を備えた、有機的で自然にインスパイアされたデザインが特徴です。

開ける

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

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

開ける