プログレスバー

eコマースのダークモードをサポートするレスポンシブプログレスバーコンポーネントで、鮮やかな配色とシンプルなレイアウトが特徴です。

プレビュー

HTMLコード

<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4 relative overflow-hidden">
  <div class="bg-indigo-600 h-4 rounded-full dark:bg-indigo-400" style="width: 75%;">
    <span class="absolute right-2 top-0 h-full flex items-center text-white text-xs font-bold">75%</span>
  </div>
</div>

関連コンポーネント

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

ニューモーフィズムデザイン、レスポンシブエフェクト、Tailwind CSSを使用したダークテーマのサポートを備えたプログレスバーコンポーネント

開ける

3D プログレスバーコンポーネント

ソーシャルネットワーキングインターフェイス用に設計されたレスポンシブプログレスバーコンポーネントで、3Dエフェクト、単色配色、ダークモードのサポートを特徴とし、Tailwind CSSを使用して構築されています。

開ける

Luxury_Grayscale_Social_Media_Progress_Bar

ソーシャルメディアインターフェイス用の複雑でエレガント、応答性の高いプログレスバーコンポーネントで、洗練されたタイポグラフィとダークモードのサポートを備えたグレースケールの豪華なデザインが特徴です。

開ける