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

Progress Bar 구성 요소

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

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center h-screen bg-gray-900 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-700 bg-opacity-30 backdrop-blur-md border border-gray-500 rounded-lg p-6 shadow-lg w-1/2">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Progress</h2>
        <div class="relative w-full h-4 rounded-full bg-gray-300 dark:bg-gray-600">
            <div class="absolute top-0 left-0 h-4 rounded-full bg-blue-500" style="width: 70%;"></div>
        </div>
        <span class="text-base text-gray-800 dark:text-gray-200 mt-2">70%</span>
    </div>
</div>

관련 구성 요소

Skeuomorphic_Monochromatic_Progress_Bar

전자 상거래를 위한 중간 복잡성의 스큐어모픽 진행률 표시줄 구성 요소로, 단색 색 구성표, 완전한 응답성 및 다크 모드 지원을 특징으로 합니다.

열다

Brutalist_ProgressBar

마켓플레이스 플랫폼에 적합한 고대비의 브루탈리즘 스타일의 진행률 표시줄 구성 요소로, 대담한 색상과 단순한 레이아웃, 완전한 응답성과 다크 모드 지원을 제공합니다.

열다

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

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

열다