CCHub Logo CCHub Tailwind Collection
구성 요소 진행 표시기 Progress Indicators 구성 요소

Progress Indicators 구성 요소

글래스모피즘 스타일의 반응형 Progress Indicators 구성 요소로, 젖빛 유리와 같은 반투명 요소와 흐림 효과를 특징으로 하며 Tailwind CSS를 사용하여 어두운 테마를 지원합니다.

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
    <div class="bg-white bg-opacity-20 backdrop-blur-lg border border-white border-opacity-30 rounded-lg shadow-lg p-6 max-w-md w-full">
        <h2 class="text-center text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Progress Indicators</h2>
        <div class="w-full mb-4">
            <div class="flex justify-between mb-1">
                <span class="text-sm text-gray-700 dark:text-gray-300">Task 1</span>
                <span class="text-sm text-gray-700 dark:text-gray-300">75%</span>
            </div>
            <div class="bg-gray-300 rounded-full h-2.5 dark:bg-gray-700">
                <div class="bg-blue-600 h-2.5 rounded-full" style="width: 75%"></div>
            </div>
        </div>
        <div class="w-full mb-4">
            <div class="flex justify-between mb-1">
                <span class="text-sm text-gray-700 dark:text-gray-300">Task 2</span>
                <span class="text-sm text-gray-700 dark:text-gray-300">50%</span>
            </div>
            <div class="bg-gray-300 rounded-full h-2.5 dark:bg-gray-700">
                <div class="bg-green-600 h-2.5 rounded-full" style="width: 50%"></div>
            </div>
        </div>
        <div class="w-full mb-4">
            <div class="flex justify-between mb-1">
                <span class="text-sm text-gray-700 dark:text-gray-300">Task 3</span>
                <span class="text-sm text-gray-700 dark:text-gray-300">25%</span>
            </div>
            <div class="bg-gray-300 rounded-full h-2.5 dark:bg-gray-700">
                <div class="bg-red-600 h-2.5 rounded-full" style="width: 25%"></div>
            </div>
        </div>
        <div class="flex items-center justify-between mt-4">
            <img src="https://picsum.photos/50" alt="Placeholder Image" class="rounded-full">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full">
        </div>
    </div>
</div>

관련 구성 요소

사이버펑크 농업 진행 지표

농업 또는 농업 웹사이트를 위한 미래지향적인 사이버펑크 테마의 진행 지표 세트로, 따뜻한 일몰 톤을 특징으로 합니다. 다크 모드 지원으로 반응형.

열다

ArtDecoProgressIndicator

직업/경력 플랫폼을 위한 복잡한 아르데코에서 영감을 받은 진행 상태 표시기 구성 요소로, 기하학적 패턴, 고급스러운 스타일링 및 보색을 특징으로 합니다. 다크 모드 지원으로 완벽하게 반응합니다.

열다

Playful_Job_Application_Progress_Indicator

입사 지원 워크플로우를 위한 복잡하고 유쾌하며 반응이 빠른 진행 상태 표시기 구성 요소로, 사탕/달콤한 색 구성표와 다크 모드 지원을 특징으로 합니다. 구인 게시판 및 경력 개발 플랫폼을 위해 설계된 이 제품은 애니메이션 전환과 격려 메시지로 여러 지원 단계를 시각적으로 나타냅니다.

열다