コンポーネント進行状況インジケーター Glassmorphism プログレスインジケータコンポーネント

Glassmorphism プログレスインジケータコンポーネント

Glassmorphism Progress Indicators コンポーネントは、鮮やかな配色とシンプルな複雑さを備えています。

プレビュー

HTMLコード

<div class="flex flex-col items-center justify-center min-h-screen dark:bg-gray-900">
  <div class="dark:bg-gray-800 bg-white bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg dark:backdrop-blur-lg rounded-lg p-6 shadow-xl dark:shadow-xl">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Progress</h2>
    <div class="w-64 h-4 bg-gray-300 rounded-full overflow-hidden dark:bg-gray-700">
      <div class="h-full bg-gradient-to-r from-cyan-400 to-blue-500 dark:from-cyan-600 dark:to-blue-700 w-3/4 rounded-full"></div>
    </div>
    <p class="text-sm text-gray-700 dark:text-gray-300 mt-2">75% Complete</p>
  </div>
</div>

関連コンポーネント

進行状況インジケータコンポーネント

ソーシャルメディアアプリケーション用のglassmorphismスタイルのプログレスインジケータコンポーネントで、ぼかし効果のあるすりガラスのような半透明の要素が特徴です。類似の配色を使用し、複数のインタラクティブ要素を備えた複雑でリッチなインターフェイスを提供します。このコンポーネントはレスポンシブで、Tailwind CSS を使用したダークテーマをサポートしています。

開ける

Memphis_Weather_Progress_Indicator

メンフィスデザインスタイルのウェザープログレスインジケーターコンポーネントで、大胆なブラックとホワイトに明るいアクセントカラーが特徴で、気候データの表示に適しています。レスポンシブデザインとダークモードのサポートが含まれています。

開ける

有機セピアプログレスインジケーター

自然をイメージしたシンプルなデート/ソーシャルアプリ用のプログレスインジケーターで、温かみのあるセピア色とブラウンの色調、流れるようなライン、レスポンシブモード、ダークモードに対応しています。

開ける

Glassmorphism プログレス インジケータ コンポーネント