進行状況インジケータ コンポーネント
鮮やかな色とダークテーマをサポートするレスポンシブデザインを使用してポートフォリオの進行状況を表示するように設計されたミニマリストの進行状況インジケーターコンポーネント。
HTMLコード
<div class="max-w-4xl mx-auto p-8">
<h2 class="text-2xl font-bold text-center mb-6">Portfolio Progress Indicators</h2>
<div class="space-y-8">
<div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-5 shadow-lg">
<div class="flex items-center justify-between mb-2">
<span class="text-lg font-semibold text-blue-600 dark:text-blue-400">Project 1</span>
<span class="text-sm font-medium text-gray-600 dark:text-gray-400">70%</span>
</div>
<div class="relative w-full h-4 bg-gray-300 dark:bg-gray-700 rounded-full">
<div class="absolute h-4 bg-blue-600 dark:bg-blue-400 rounded-full" style="width: 70%;"></div>
</div>
</div>
<div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-5 shadow-lg">
<div class="flex items-center justify-between mb-2">
<span class="text-lg font-semibold text-red-600 dark:text-red-400">Project 2</span>
<span class="text-sm font-medium text-gray-600 dark:text-gray-400">45%</span>
</div>
<div class="relative w-full h-4 bg-gray-300 dark:bg-gray-700 rounded-full">
<div class="absolute h-4 bg-red-600 dark:bg-red-400 rounded-full" style="width: 45%;"></div>
</div>
</div>
<div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-5 shadow-lg">
<div class="flex items-center justify-between mb-2">
<span class="text-lg font-semibold text-green-600 dark:text-green-400">Project 3</span>
<span class="text-sm font-medium text-gray-600 dark:text-gray-400">90%</span>
</div>
<div class="relative w-full h-4 bg-gray-300 dark:bg-gray-700 rounded-full">
<div class="absolute h-4 bg-green-600 dark:bg-green-400 rounded-full" style="width: 90%;"></div>
</div>
</div>
<div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-5 shadow-lg">
<div class="flex items-center justify-between mb-2">
<span class="text-lg font-semibold text-yellow-600 dark:text-yellow-400">Project 4</span>
<span class="text-sm font-medium text-gray-600 dark:text-gray-400">60%</span>
</div>
<div class="relative w-full h-4 bg-gray-300 dark:bg-gray-700 rounded-full">
<div class="absolute h-4 bg-yellow-600 dark:bg-yellow-400 rounded-full" style="width: 60%;"></div>
</div>
</div>
</div>
</div>関連コンポーネント
産業進捗インジケータコンポーネント
工業デザインの美学を備えた複雑でコントラストの高いプログレスインジケーターコンポーネントで、ビジネス/企業のWebサイトに適しています。複数のプログレスバー、詳細なステータスセクション、原材料のテクスチャが特徴で、ダークモードのサポートにより完全にレスポンシブです。
進行状況インジケータ コンポーネント
スポーツ/フィットネスアプリケーション向けに設計されたラグジュアリー/プレミアムスタイルのプログレスインジケーターコンポーネントで、ジュエルトーン、洗練されたタイポグラフィ、ダークモードをサポートする完全な応答性が特徴です。
進行状況インジケータ コンポーネント
ネオン/グロー効果とジュエルトーンを備えたシンプルで応答性の高いプログレスインジケーターコンポーネントで、コンサルティング/サービスWebサイトに適しています。ダークモードのサポートが含まれています。