다크 모드 프로그레스 바 컴포넌트
비즈니스/기업 웹사이트를 위한 반응형 다크 모드 진행률 표시줄 구성 요소로, 생생한 색상과 대화형 요소를 활용합니다.
HTML 코드
<div class="p-6 max-w-md mx-auto bg-gray-800 rounded-xl shadow-md space-y-4">
<h2 class="text-2xl font-bold text-white text-center">Progress Tracker</h2>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-400">Task 1</span>
<span class="text-sm text-gray-400">75%</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-4">
<div class="bg-green-500 h-4 rounded-full" style="width: 75%;"></div>
</div>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-400">Task 2</span>
<span class="text-sm text-gray-400">50%</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-4">
<div class="bg-yellow-500 h-4 rounded-full" style="width: 50%;"></div>
</div>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-400">Task 3</span>
<span class="text-sm text-gray-400">30%</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-4">
<div class="bg-red-500 h-4 rounded-full" style="width: 30%;"></div>
</div>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-400">Task 4</span>
<span class="text-sm text-gray-400">10%</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-4">
<div class="bg-blue-500 h-4 rounded-full" style="width: 10%;"></div>
</div>
</div>
관련 구성 요소
진행률 표시줄
Microinteractions 디자인이 있는 Progress Bar 구성 요소. HTML 및 CSS(Tailwind CSS)만 사용하는 반응형 효과 및 어두운 테마 지원이 포함됩니다.
Progress Bar 구성 요소
전자 상거래 애플리케이션을 위한 회색조 색 구성표가 있는 브루탈리즘 디자인 스타일의 간단한 진행률 표시줄 구성 요소입니다. 반응형이며 다크 모드를 지원합니다.