コンポーネント プログレスバー ダークモードプログレスバーコンポーネント

ダークモードプログレスバーコンポーネント

ビジネス/企業Webサイト用のレスポンシブダークモードプログレスバーコンポーネントで、鮮やかな色とインタラクティブな要素を利用しています。

プレビュー

HTMLコード

<div class="p-6 max-w-md mx-auto bg-gray-800 rounded-xl shadow-md space-y-4">
    <h2 class="text-2xl font-bold text-white text-center">Progress Tracker</h2>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 1</span>
        <span class="text-sm text-gray-400">75%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-green-500 h-4 rounded-full" style="width: 75%;"></div>
    </div>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 2</span>
        <span class="text-sm text-gray-400">50%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-yellow-500 h-4 rounded-full" style="width: 50%;"></div>
    </div>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 3</span>
        <span class="text-sm text-gray-400">30%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-red-500 h-4 rounded-full" style="width: 30%;"></div>
    </div>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 4</span>
        <span class="text-sm text-gray-400">10%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-blue-500 h-4 rounded-full" style="width: 10%;"></div>
    </div>
</div>

関連コンポーネント

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

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

開ける

Glassmorphism プログレスバー

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

開ける

Skeuomorphic_Monochromatic_Progress_Bar

電子商取引用の適度な複雑さのスキューモーフィックプログレスバーコンポーネントで、単色の配色、完全な応答性、およびダークモードのサポートを特長としています。

開ける