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

Tailwind CSSを使用して、ダークモードを念頭に置いて設計されたレスポンシブプログレスバーコンポーネント。

プレビュー

HTMLコード

<div class="flex items-center justify-center h-screen bg-gray-900">
  <div class="w-full max-w-md">
    <h2 class="text-white text-lg font-semibold mb-4">Progress Bar</h2>
    <div class="relative pt-1">
      <div class="flex items-center justify-between mb-2">
        <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200">
          70%
        </span>
        <span class="text-xs font-semibold inline-block text-gray-400">
          7/10
        </span>
      </div>
      <div class="h-2 bg-gray-700 rounded">
        <div class="h-full bg-teal-500 rounded" style="width: 70%;"></div>
      </div>
    </div>
    <p class="text-gray-400 text-sm mt-2">Loading...</p>
  </div>
</div>

関連コンポーネント

Brutalist_ProgressBar

マーケットプレイスプラットフォームに適したハイコントラストのブルータリズムスタイルのプログレスバーコンポーネントで、大胆な色とシンプルなレイアウトが特徴で、完全な応答性とダークモードがサポートされています。

開ける

スキューモーフィックプログレスバー

ポートフォリオ用のスキューモーフィックプログレスバーコンポーネントで、単色の配色と、Tailwind CSSを使用したレスポンシブモードとダークモードをサポートする複雑でインタラクティブなデザインが特徴です。

開ける

Luxury_Grayscale_Social_Media_Progress_Bar

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

開ける