プログレスバーコンポーネント
シンプルなプログレスバーコンポーネントで、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>関連コンポーネント
マテリアルデザインEarthyプログレスバー
マテリアルデザインにインスパイアされたアースカラーのプログレスバーで、ソーシャルメディアのインターフェースに適しています。レスポンシブで、Tailwind CSSを使用したダークモードのサポートが含まれています。