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

3D要素で設計されたレスポンシブプログレスバーコンポーネントで、eコマースに適した類似の配色を使用し、ダークモードをサポートしています

プレビュー

HTMLコード

<div class="max-w-md mx-auto p-4">
    <div class="relative h-8 bg-gray-300 rounded-md overflow-hidden dark:bg-gray-700">
        <div class="absolute inset-0 transition-all duration-300 ease-out bg-gradient-to-r from-green-400 to-blue-400 dark:from-green-600 dark:to-blue-600" style="width: 70%;"></div>
        <div class="absolute inset-0 flex items-center justify-center text-white font-semibold">
            70%
        </div>
    </div>
    <div class="mt-4 text-gray-700 dark:text-gray-300">
        <p class="text-sm">Progress towards your shopping goals.</p>
    </div>
</div>

関連コンポーネント

プログレスバー

マイクロインタラクションデザインのプログレスバーコンポーネント。レスポンシブ効果と、HTML と CSS (Tailwind CSS) のみを使用したダークテーマのサポートが含まれています。

開ける

ミニマリストプログレスバー

パステルカラーのミニマリストでフラットなデザインのプログレスバーコンポーネントで、プロのビジネスや企業のWebサイトに適しています。レスポンシブデザインで、Tailwind CSSを使用したダークモードに対応しています。

開ける

Glassmorphism プログレスバー

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

開ける