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

Progress Bar 구성 요소

전자 상거래 애플리케이션을 위한 회색조 색 구성표가 있는 브루탈리즘 디자인 스타일의 간단한 진행률 표시줄 구성 요소입니다. 반응형이며 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<div class="w-full max-w-md mx-auto p-4">
    <h2 class="text-white text-xl font-bold mb-2">Loading Your Items...</h2>
    <div class="bg-gray-300 dark:bg-gray-700 rounded-full h-6">
        <div class="bg-black dark:bg-white h-6 rounded-full" style="width: 70%;"></div>
    </div>
    <div class="flex justify-between mt-2">
        <span class="text-gray-500 dark:text-gray-300 text-sm">0%</span>
        <span class="text-gray-500 dark:text-gray-300 text-sm">70%</span>
    </div>
</div>

관련 구성 요소

Progress Bar 구성 요소

머티리얼 디자인 스타일로 디자인된 반응형 진행률 표시줄 구성 요소로, 포트폴리오 쇼케이스를 위한 파스텔 색 구성표를 통합합니다. 다크 모드를 지원합니다.

열다

Progress Bar 구성 요소

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

열다

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

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

열다