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

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>

関連コンポーネント

Eコマースプロフェッショナルプログレスバー

eコマース用に設計された複雑で応答性の高いプログレスバーコンポーネントで、秋の配色(豊かなオレンジ、ブラウン、バーガンディ)とサポートするダークモードが特徴です。それは企業環境にクリーンでプロフェッショナルな外観を提供します。

開ける

Organic_Nature_ProgressBar

自然にインスパイアされたレトロなテーマのプログレスバーコンポーネントで、工業および製造アプリケーション向けで、流れるようなライン、落ち着いた色、ダークモードのサポートが特徴です。

開ける

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

マテリアルデザインの影響を受けたシンプルでレスポンシブなプログレスバーコンポーネントで、温かみのある夕焼けの色調を使用しています。テクノロジー/SaaSアプリケーションに最適で、ダークモードをサポートしています。

開ける