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

Tailwind CSSを使用してダークモード用に設計されたレスポンシブプログレスバーコンポーネントで、最新のWebアプリケーションに適しています。

プレビュー

HTMLコード

<div class="flex items-center justify-center h-screen bg-gray-900 p-4">
    <div class="w-full max-w-md">
        <h2 class="text-white text-lg font-semibold mb-2">Upload Progress</h2>
        <div class="relative bg-gray-700 rounded-full h-4">
            <div class="bg-green-500 rounded-full h-full" style="width: 60%;"></div>
        </div>
        <div class="flex justify-between text-xs text-gray-400 mt-1">
            <span>0%</span>
            <span>60%</span>
            <span>100%</span>
        </div>
    </div>
</div>

関連コンポーネント

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

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

開ける

Glassmorphism プログレスバー

ソーシャルメディアインターフェース用に設計されたGlassmorphismスタイルのプログレスバーで、鮮やかな色とダークモードのサポートが特徴です。JavaScriptを使用しないシンプルなレイアウト。

開ける

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

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

開ける