トライアド ダーク モードのプログレス バー
ダークモード用のシンプルでトライアドカラーのプログレスバーコンポーネントで、ブログやコンテンツの消費に適しています。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>関連コンポーネント
Eコマースプロフェッショナルプログレスバー
eコマース用に設計された複雑で応答性の高いプログレスバーコンポーネントで、秋の配色(豊かなオレンジ、ブラウン、バーガンディ)とサポートするダークモードが特徴です。それは企業環境にクリーンでプロフェッショナルな外観を提供します。
3Dグレースケールスポーツフィットネスプログレスバー
スポーツやフィットネスのアプリケーション向けに設計された複雑な3Dグレースケールプログレスバーコンポーネントで、トレーニングの進行状況を奥行きと視覚的なエンゲージメントで表示します。ダークモードのサポートが含まれており、完全にレスポンシブです。