CCHub Logo CCHub Tailwind Collection
コンポーネント プログレスバー トライアド ダーク モードのプログレス バー

トライアド ダーク モードのプログレス バー

ダークモード用のシンプルでトライアドカラーのプログレスバーコンポーネントで、ブログやコンテンツの消費に適しています。Tailwind CSSを使用したレスポンシブデザインを特徴とし、JavaScriptなしでダークテーマをサポートするためのdark:プレフィックスを利用しています。

プレビュー

HTMLコード 

<div class="dark:bg-gray-900 p-4">
  <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Reading Progress</h2>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-4">
    <div class="dark:bg-purple-500 h-2.5 rounded-full" style="width: 45%;"></div>
  </div>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-4">
    <div class="dark:bg-yellow-500 h-2.5 rounded-full" style="width: 60%;"></div>
  </div>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
    <div class="dark:bg-emerald-500 h-2.5 rounded-full" style="width: 75%;"></div>
  </div>
</div>

関連コンポーネント

ニューモーフィズムプログレスバー

ポートフォリオ用のニューモーフィズムスタイルのプログレスバーで、パステルカラーの配色、適度な複雑さ、応答性、ダークテーマのサポートが特徴です。JavaScriptは含まれていません。コンポーネントは HTML と Tailwind CSS で構築されています。

開ける

ニューモーフィズムプログレスバー

ダッシュボード用に設計されたレスポンシブなニューモーフィズムスタイルのプログレスバーコンポーネントで、インタラクティブ機能が組み込まれ、ダークモードがサポートされています。

開ける

Glassmorphism プログレスバー

ソーシャルメディアインターフェース用に設計されたGlassmorphismスタイルのプログレスバーで、鮮やかな色とダークモードのサポートが特徴です。JavaScriptを使用しないシンプルなレイアウト。

開ける