Progress Bar 구성 요소
3D 요소로 디자인된 반응형 진행률 표시줄 구성 요소로, 전자 상거래에 적합한 유사한 색 구성표를 사용하며 다크 모드를 지원합니다.
HTML 코드
<div class="max-w-md mx-auto p-4">
<div class="relative h-8 bg-gray-300 rounded-md overflow-hidden dark:bg-gray-700">
<div class="absolute inset-0 transition-all duration-300 ease-out bg-gradient-to-r from-green-400 to-blue-400 dark:from-green-600 dark:to-blue-600" style="width: 70%;"></div>
<div class="absolute inset-0 flex items-center justify-center text-white font-semibold">
70%
</div>
</div>
<div class="mt-4 text-gray-700 dark:text-gray-300">
<p class="text-sm">Progress towards your shopping goals.</p>
</div>
</div>관련 구성 요소
Luxury_Grayscale_Social_Media_Progress_Bar
소셜 미디어 인터페이스를 위한 복잡하고 우아하며 반응이 빠른 진행률 표시줄 구성 요소로, 정교한 타이포그래피와 다크 모드를 지원하는 그레이스케일 럭셔리 디자인이 특징입니다.
Skeuomorphic_Monochromatic_Progress_Bar
전자 상거래를 위한 중간 복잡성의 스큐어모픽 진행률 표시줄 구성 요소로, 단색 색 구성표, 완전한 응답성 및 다크 모드 지원을 특징으로 합니다.