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

Progress Bar 구성 요소

파스텔 색상 구성표가 있는 다크 모드용으로 설계된 반응형 진행률 표시줄 구성 요소로, 비즈니스/기업 웹 사이트에 적합합니다.

미리 보기

HTML 코드 

<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-md">
    <h2 class="text-white text-lg font-semibold mb-4">Progress Bar</h2>
    <div class="relative pt-1">
        <div class="flex justify-between mb-1 text-sm text-white">
            <span>0%</span>
            <span>100%</span>
        </div>
        <div class="h-2 bg-gray-600 rounded">
            <div class="bg-pastel-green-500 h-full rounded" style="width: 70%;"></div>
        </div>
    </div>
    <div class="flex items-center justify-between mt-4">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
            <span class="text-white">John Doe</span>
        </div>
        <span class="text-gray-400 dark:text-gray-500">In Progress</span>
    </div>
</div>

관련 구성 요소

뉴모피즘 프로그레스 바

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

열다

Industrial_Travel_Progress_Bar

여행/관광 웹사이트를 위한 간단한 산업 스타일의 진행률 표시줄 구성 요소로, 보라색/보라색 색 구성표와 다크 모드 지원으로 완전한 응답성을 제공합니다.

열다

Bauhaus 프로그레스 바 구성 요소

엔터테인먼트/미디어 플랫폼에 적합한 적당히 복잡하고 반응성이 뛰어난 Bauhaus에서 영감을 받은 진행률 표시줄 구성 요소로, 멋진 중립 및 다크 모드 지원을 특징으로 합니다.

열다