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

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

プレビュー

HTMLコード

<!-- Light Mode -->
<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800">
  <div class="w-64 h-4 bg-gray-300 rounded-full shadow-inner dark:bg-gray-700 dark:shadow-inner-dark">
    <div class="w-3/4 h-full text-center text-xs text-white bg-blue-500 rounded-full dark:bg-blue-600" style="width: 75%;">
    </div>
  </div>
</div>

<!-- Dark Mode (example - activate dark mode in your Tailwind config) -->
<div class="flex items-center justifies-center min-h-screen bg-gray-800">
  <div class="w-64 h-4 bg-gray-700 rounded-full shadow-inner-dark">
    <div class="w-3/4 h-full text-center text-xs text-white bg-blue-600 rounded-full" style="width: 75%;">
    </div>
  </div>
</div>

関連コンポーネント

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

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

開ける

トライアドダークモードのプログレスバー

ダークモード用のシンプルでトライアドカラーのプログレスバーコンポーネントで、ブログやコンテンツの消費に適しています。Tailwind CSSを使用したレスポンシブデザインを特徴とし、JavaScriptなしでダークテーマをサポートするためのdark:プレフィックスを利用しています。

開ける

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

マテリアルデザインスタイルでデザインされたレスポンシブプログレスバーコンポーネントで、ポートフォリオショーケースにパステルカラーの配色を組み込んでいます。ダークモードをサポートしています。

開ける