プログレスバー

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>

関連コンポーネント

Luxury_Grayscale_Social_Media_Progress_Bar

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

開ける

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

パステルカラーの配色のダークモード用に設計されたレスポンシブプログレスバーコンポーネントで、ビジネス/企業のWebサイトに適しています。

開ける

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

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

開ける