CCHub Logo CCHub Tailwind Collection
コンポーネント プログレスバー プログレスバーコンポーネント

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

シンプルなプログレスバーコンポーネントで、eコマースアプリケーション用のグレースケールの配色でブルータリズムのデザインでスタイリングされています。応答性が高く、ダークモードのサポートを備えています。

プレビュー

HTMLコード 

<div class="w-full max-w-md mx-auto p-4">
    <h2 class="text-white text-xl font-bold mb-2">Loading Your Items...</h2>
    <div class="bg-gray-300 dark:bg-gray-700 rounded-full h-6">
        <div class="bg-black dark:bg-white h-6 rounded-full" style="width: 70%;"></div>
    </div>
    <div class="flex justify-between mt-2">
        <span class="text-gray-500 dark:text-gray-300 text-sm">0%</span>
        <span class="text-gray-500 dark:text-gray-300 text-sm">70%</span>
    </div>
</div>

関連コンポーネント

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

パステルカラーの配色のダークモード用に設計されたレスポンシブプログレスバーコンポーネントで、ビジネス/企業のWebサイトに適しています。

開ける

Organic_Nature_ProgressBar

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

開ける

Brutalist_ProgressBar

マーケットプレイスプラットフォームに適したハイコントラストのブルータリズムスタイルのプログレスバーコンポーネントで、大胆な色とシンプルなレイアウトが特徴で、完全な応答性とダークモードがサポートされています。

開ける