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

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

プレビュー

HTMLコード

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-4">
    <div class="w-64 bg-gray-200 dark:bg-gray-900 rounded-full shadow-lg p-1">
        <div class="bg-gradient-to-r from-blue-500 to-blue-700 h-4 rounded-full" style="width: 70%;"></div>
    </div>
    <span class="mt-2 text-gray-700 dark:text-gray-300">70%</span>
</div>

関連コンポーネント

サイバーパンクネオレトロプログレスバー

サイバーパンク、ネオレトロな美学、暗い背景、落ち着いたビンテージアクセントカラーを備えた適度な複雑さのプログレスバーコンポーネントで、エンターテインメント/メディアプラットフォーム向けに設計されています。セグメント化されたプログレスディスプレイが特徴で、ダークモードをサポートして完全にレスポンシブです。

開ける

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

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

開ける

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

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

開ける