구성 요소 진행 표시기 Progress Indicators 구성 요소

Progress Indicators 구성 요소

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

미리 보기

HTML 코드

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
    <h1 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-200 mb-6">
        Retro Progress Indicators
    </h1>
    <div class="w-full max-w-lg">
        <!-- Progress Bar -->
        <div class="mb-6">
            <div class="relative pt-1">
                <div class="flex mb-2 items-center justify-between">
                    <div class="text-sm font-medium text-gray-600 dark:text-gray-300">Loading...</div>
                    <div class="text-sm font-medium text-gray-600 dark:text-gray-300">80%</div>
                </div>
                <div class="flex h-2 mb-4 bg-gray-200 rounded dark:bg-gray-700">
                    <div class="bg-yellow-500 h-full rounded" style="width: 80%"></div>
                </div>
            </div>
        </div>
        <!-- Circular Progress Indicator -->
        <div class="flex items-center justify-center mb-6">
            <div class="relative w-24 h-24">
                <img src="https://picsum.photos/seed/circularprogress/300/300" class="rounded-full shadow-lg" alt="Circular Progress" /> 
                <div class="absolute inset-0 flex items-center justify-center text-xl font-bold text-yellow-500">
                    80%
                </div>
            </div>
        </div>
        <!-- Step Indicators -->
        <div class="flex justify-between w-full text-center">
            <div>
                <div class="w-4 h-4 bg-yellow-500 rounded-full mx-auto mb-2"></div>
                <div class="text-sm font-medium text-gray-600 dark:text-gray-300">Step 1</div>
            </div>
            <div>
                <div class="w-4 h-4 bg-gray-300 rounded-full mx-auto mb-2 dark:bg-gray-600"></div>
                <div class="text-sm font-medium text-gray-600 dark:text-gray-300">Step 2</div>
            </div>
            <div>
                <div class="w-4 h-4 bg-gray-300 rounded-full mx-auto mb-2 dark:bg-gray-600"></div>
                <div class="text-sm font-medium text-gray-600 dark:text-gray-300">Step 3</div>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" class="rounded-full w-16 h-16" alt="User Avatar" />
        <div class="text-center mt-2 text-sm text-gray-600 dark:text-gray-300">John Doe</div>
    </div>
</div>

관련 구성 요소

브루탈리스트그레이스케일프로그레시브 바

블로그 콘텐츠를 위한 브루탈리즘 스타일의 그레이스케일 진행률 표시줄로, 심플한 디자인, 다크 모드 지원 및 응답성을 제공합니다.

열다

Progress Indicators 구성 요소

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

열다

Progress Indicators 구성 요소

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

열다