ダークモードローダー

ダークモードインターフェース用のローダーまたはスケルトンコンポーネントで、レスポンシブ機能を備えています。Javascriptは必要ありません。

プレビュー

HTMLコード

<div class="flex flex-col gap-4 w-full">
  <div class="flex items-center justify-between">
    <div>
      <div class="h-2 w-24 bg-gray-500 rounded"></div>
      <div class="h-2 w-16 bg-gray-500 mt-2 rounded"></div>
    </div>
    <div class="h-10 w-10 bg-gray-500 rounded-full"></div>
  </div>
  <div class="space-y-2">
    <div class="h-2 w-full bg-gray-500 rounded"></div>
    <div class="h-2 w-full bg-gray-500 rounded"></div>
    <div class="h-2 w-full bg-gray-500 rounded"></div>
    <div class="h-2 w-1/2 bg-gray-500 rounded"></div>
  </div>
</div>

関連コンポーネント

ローダーコンポーネント

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

開ける

ローダーコンポーネント

マテリアルデザインスタイルでデザインされたローダーコンポーネントで、レスポンシブエフェクトと Tailwind CSS を使用したダークテーマのサポートを備えています。

開ける

ローダーコンポーネント

マテリアルデザインスタイルで設計されたローダーコンポーネントで、レスポンシブエフェクトと Tailwind CSS を使用したダークテーマのサポートが特徴です。

開ける