뉴모피즘 프로그레스 바
대시보드용으로 설계된 반응형 뉴모피즘 스타일의 진행률 표시줄 구성 요소로, 대화형 기능을 통합하고 다크 모드를 지원합니다.
HTML 코드
<div class="max-w-md mx-auto mt-10 p-5 bg-gray-100 dark:bg-gray-800 rounded-xl shadow-md">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3">Progress Bar</h2>
<div class="relative pt-1">
<div class="flex justify-between mb-1">
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200 dark:bg-teal-600 dark:text-teal-200">Task 1</span>
<span class="text-xs font-semibold text-gray-600 dark:text-gray-400">70%</span>
</div>
<div class="flex items-center h-2 bg-gray-300 dark:bg-gray-600 rounded-full">
<div class="h-full bg-teal-400 rounded-full transition-all duration-300 w-7/12"></div>
</div>
</div>
<div class="relative pt-1">
<div class="flex justify-between mb-1">
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-purple-600 bg-purple-200 dark:bg-purple-600 dark:text-purple-200">Task 2</span>
<span class="text-xs font-semibold text-gray-600 dark:text-gray-400">40%</span>
</div>
<div class="flex items-center h-2 bg-gray-300 dark:bg-gray-600 rounded-full">
<div class="h-full bg-purple-400 rounded-full transition-all duration-300 w-5/12"></div>
</div>
</div>
<div class="relative pt-1">
<div class="flex justify-between mb-1">
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blue-600 bg-blue-200 dark:bg-blue-600 dark:text-blue-200">Task 3</span>
<span class="text-xs font-semibold text-gray-600 dark:text-gray-400">90%</span>
</div>
<div class="flex items-center h-2 bg-gray-300 dark:bg-gray-600 rounded-full">
<div class="h-full bg-blue-400 rounded-full transition-all duration-300 w-11/12"></div>
</div>
</div>
</div>관련 구성 요소
Industrial_Travel_Progress_Bar
여행/관광 웹사이트를 위한 간단한 산업 스타일의 진행률 표시줄 구성 요소로, 보라색/보라색 색 구성표와 다크 모드 지원으로 완전한 응답성을 제공합니다.
사진 촬영을 위한 그라데이션 레인보우 프로그레스 바
사진 포트폴리오를 위한 복잡하고 반응이 빠른 진행률 표시줄 구성 요소로, 멀티 컬러 그라데이션 무지개 디자인과 다크 모드 지원을 특징으로 합니다. 사진 로딩 또는 갤러리 진행을 보여주는 데 이상적입니다.