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

Progress Bar 구성 요소

최신 웹 애플리케이션에 적합한 Tailwind CSS를 사용하여 다크 모드용으로 설계된 반응형 진행률 표시줄 구성 요소입니다.

미리 보기

HTML 코드 

<div class="flex items-center justify-center h-screen bg-gray-900 p-4">
    <div class="w-full max-w-md">
        <h2 class="text-white text-lg font-semibold mb-2">Upload Progress</h2>
        <div class="relative bg-gray-700 rounded-full h-4">
            <div class="bg-green-500 rounded-full h-full" style="width: 60%;"></div>
        </div>
        <div class="flex justify-between text-xs text-gray-400 mt-1">
            <span>0%</span>
            <span>60%</span>
            <span>100%</span>
        </div>
    </div>
</div>

관련 구성 요소

Progress Bar 구성 요소

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

열다

미니멀리스트 프로그레스 바

파스텔 색상의 미니멀하고 평평한 디자인의 진행률 표시줄 구성 요소로 전문 비즈니스 또는 기업 웹사이트에 적합합니다. 반응형 디자인이며 Tailwind CSS를 사용하여 다크 모드를 지원합니다.

열다

다크 모드 프로그레스 바(Dark Mode Progress Bar)

Tailwind CSS를 사용하여 다크 모드용으로 설계된 반응형 진행률 표시줄 구성 요소로, 세련된 디자인과 어두운 테마 지원을 특징으로 합니다.

열다