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

Progress Indicators 구성 요소

레트로/빈티지 스타일의 진행률 표시기 구성 요소는 Tailwind CSS를 사용하여 반응형 디자인과 어두운 테마를 지원합니다.

미리 보기

HTML 코드 

<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-4">Progress Indicators</h2>
    <div class="mb-4">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Loading...</h3>
        <div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-4 mt-2">
            <div class="bg-blue-500 h-4 rounded-full transition-all duration-500 ease-in-out" style="width: 70%;"></div>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">70% Complete</p>
    </div>
    <div class="mb-4">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Uploading...</h3>
        <div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-4 mt-2">
            <div class="bg-blue-500 h-4 rounded-full transition-all duration-500 ease-in-out" style="width: 50%;"></div>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">50% Uploaded</p>
    </div>
    <div class="mb-4">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Downloading...</h3>
        <div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-4 mt-2">
            <div class="bg-blue-500 h-4 rounded-full transition-all duration-500 ease-in-out" style="width: 30%;"></div>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">30% Downloaded</p>
    </div>
    <div class="mt-6">
        <img class="rounded-full w-12 h-12 mx-auto" src="https://picsum.photos/200/200" alt="Random Image" />
        <p class="text-center text-gray-600 dark:text-gray-400 mt-2">Vintage Style Image</p>
    </div>
    <div class="mt-6">
        <img class="rounded-full w-12 h-12 mx-auto" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Random Avatar" />
        <p class="text-center text-gray-600 dark:text-gray-400 mt-2">User Avatar</p>
    </div>
</div>

관련 구성 요소

Progress Indicators 구성 요소

반응형 Progress Indicators 컴포넌트는 유사한 색 구성표를 가진 다크 모드 UI 대시보드용으로 설계되었습니다. 여기에는 막대, 원 및 활동 피드와 같은 다양한 진행률 표시기가 포함되어 있으며 모두 다크 모드 지원을 위해 Tailwind CSS로 스타일이 지정되었습니다. JavaScript는 사용되지 않습니다.

열다

Progress Indicators 구성 요소

80년대와 90년대의 레트로/빈티지 미학에서 영감을 받은 간단한 Progress Indicators 구성 요소로, 보색체를 사용합니다. 소셜 미디어 인터페이스용으로 설계되었으며 어두운 테마 지원으로 반응합니다.

열다

Progress Indicators 구성 요소

소셜 미디어 애플리케이션을 위한 glassmorphism 스타일의 진행률 표시기 구성 요소로, 흐림 효과가 있는 젖빛 유리와 같은 반투명 요소를 특징으로 합니다. 유사한 색 구성표를 사용하며 여러 대화형 요소가 있는 복잡하고 풍부한 인터페이스를 제공합니다. 구성 요소는 반응형이며 Tailwind CSS에서 어두운 테마를 지원합니다.

열다