CCHub Logo CCHub Tailwind Collection
구성 요소 진행률 표시줄 다크 모드 프로그레스 바 컴포넌트

다크 모드 프로그레스 바 컴포넌트

비즈니스/기업 웹사이트를 위한 반응형 다크 모드 진행률 표시줄 구성 요소로, 생생한 색상과 대화형 요소를 활용합니다.

미리 보기

HTML 코드 

<div class="p-6 max-w-md mx-auto bg-gray-800 rounded-xl shadow-md space-y-4">
    <h2 class="text-2xl font-bold text-white text-center">Progress Tracker</h2>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 1</span>
        <span class="text-sm text-gray-400">75%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-green-500 h-4 rounded-full" style="width: 75%;"></div>
    </div>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 2</span>
        <span class="text-sm text-gray-400">50%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-yellow-500 h-4 rounded-full" style="width: 50%;"></div>
    </div>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 3</span>
        <span class="text-sm text-gray-400">30%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-red-500 h-4 rounded-full" style="width: 30%;"></div>
    </div>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 4</span>
        <span class="text-sm text-gray-400">10%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-blue-500 h-4 rounded-full" style="width: 10%;"></div>
    </div>
</div>

관련 구성 요소

트라이어딕 다크 모드 프로그레스 바

다크 모드를 위한 단순하고 삼각형 색상의 진행률 표시줄 구성 요소로, 블로그 및 콘텐츠 소비에 적합합니다. Tailwind CSS를 사용한 반응형 디자인이 특징이며, JavaScript 없이 어두운 테마 지원을 위해 dark: 접두사를 사용합니다.

열다

미니멀리스트 트라이어딕 프로그레스 바

트라이어딕 색 구성표와 어두운 테마 지원이 있는 미니멀하고 반응이 빠른 진행률 표시줄로 소셜 미디어 응용 프로그램에 적합합니다.

열다

3D 프로그레스 바 컴포넌트

소셜 네트워킹 인터페이스용으로 설계된 반응형 진행률 표시줄 구성 요소로, Tailwind CSS를 사용하여 구축된 3D 효과, 단색 색 구성표 및 다크 모드 지원을 특징으로 합니다.

열다