ミニマリストプログレスバー
パステルカラーのミニマリストでフラットなデザインのプログレスバーコンポーネントで、プロのビジネスや企業のWebサイトに適しています。レスポンシブデザインで、Tailwind CSSを使用したダークモードに対応しています。
HTMLコード
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
<div class="bg-blue-400 h-2.5 rounded-full" style="width: 45%"></div>
</div>関連コンポーネント
プログレスバー
マイクロインタラクションデザインのプログレスバーコンポーネント。レスポンシブ効果と、HTML と CSS (Tailwind CSS) のみを使用したダーク テーマのサポートが含まれています。
トライアド ダーク モードのプログレス バー
ダークモード用のシンプルでトライアドカラーのプログレスバーコンポーネントで、ブログやコンテンツの消費に適しています。Tailwind CSSを使用したレスポンシブデザインを特徴とし、JavaScriptなしでダークテーマをサポートするためのdark:プレフィックスを利用しています。
ニューモーフィックプログレスバー
Neumorphism スタイルで設計されたレスポンシブ プログレス バー コンポーネントで、Tailwind CSS を使用して明るいテーマと暗いテーマの両方をサポートします。