CCHub Logo CCHub Tailwind Collection
구성 요소 진행률 표시줄 Progress Bar 구성 요소

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>

관련 구성 요소

뉴모피즘 프로그레스 바

포트폴리오를 위한 뉴모피즘(Neumorphism) 스타일의 진행 표시줄은 파스텔 색상 구성표, 적당한 복잡성, 응답성 및 어두운 테마 지원을 특징으로 합니다. JavaScript는 포함되어 있지 않습니다. 구성 요소는 HTML 및 Tailwind CSS로 빌드됩니다.

열다

머티리얼 디자인 흙빛 진행률 표시줄

머티리얼 디자인에서 영감을 받은 어스 톤의 진행률 표시줄로, 소셜 미디어 인터페이스에 적합합니다. 반응형이며 Tailwind CSS를 사용하는 다크 모드 지원이 포함됩니다.

열다

Progress Bar 구성 요소

glassmorphism 및 단색 색상으로 스타일링된 간단한 진행률 표시줄 구성 요소로, 비즈니스 및 기업 웹 사이트에 적합하며 다크 모드를 지원합니다.

열다