Glassmorphism プログレスバー

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

プレビュー

HTMLコード

<div class="w-full bg-gray-200 bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-full h-4 dark:bg-gray-700 dark:bg-opacity-20 dark:backdrop-filter dark:backdrop-blur-lg">
  <div class="bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 h-4 rounded-full" style="width: 75%;"></div>
</div>

関連コンポーネント

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

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

開ける

ニューモーフィズムプログレスバー

ニューモーフィズムデザイン、レスポンシブエフェクト、Tailwind CSSを使用したダークテーマのサポートを備えたプログレスバーコンポーネント

開ける

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

Tailwind CSSを使用して、ダークモードを念頭に置いて設計されたレスポンシブプログレスバーコンポーネント。

開ける