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

Neumorphism スタイルで設計されたレスポンシブプログレスバーコンポーネントで、Tailwind CSS を使用して明るいテーマと暗いテーマの両方をサポートします。

プレビュー

HTMLコード

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-4">
    <div class="w-64 bg-gray-200 dark:bg-gray-900 rounded-full shadow-lg p-1">
        <div class="bg-gradient-to-r from-blue-500 to-blue-700 h-4 rounded-full" style="width: 70%;"></div>
    </div>
    <span class="mt-2 text-gray-700 dark:text-gray-300">70%</span>
</div>

関連コンポーネント

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

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

開ける

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

ダッシュボード用に設計されたレスポンシブなニューモーフィズムスタイルのプログレスバーコンポーネントで、インタラクティブ機能が組み込まれ、ダークモードがサポートされています。

開ける

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

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

開ける