Progress Bar 구성 요소

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

미리 보기

HTML 코드

<div class="flex items-center justify-center h-screen bg-gray-900 p-4">
    <div class="w-full max-w-md">
        <h2 class="text-white text-lg font-semibold mb-2">Upload Progress</h2>
        <div class="relative bg-gray-700 rounded-full h-4">
            <div class="bg-green-500 rounded-full h-full" style="width: 60%;"></div>
        </div>
        <div class="flex justify-between text-xs text-gray-400 mt-1">
            <span>0%</span>
            <span>60%</span>
            <span>100%</span>
        </div>
    </div>
</div>

관련 구성 요소

다크 모드 프로그레스 바 컴포넌트

비즈니스/기업 웹사이트를 위한 반응형 다크 모드 진행률 표시줄 구성 요소로, 생생한 색상과 대화형 요소를 활용합니다.

열다

사이버펑크 네오 레트로 프로그레스 바(Cyberpunk Neo-Retro Progress Bar)

사이버펑크, 네오 레트로 미학, 어두운 배경 및 차분한 빈티지 강조 색상이 있는 중간 복잡성의 진행률 표시줄 구성 요소로, 엔터테인먼트/미디어 플랫폼용으로 설계되었습니다. 세그먼트화된 진행 상황 표시가 특징이며 다크 모드 지원으로 완벽하게 반응합니다.

열다

미니멀리스트 프로그레스 바

파스텔 색상의 미니멀하고 평평한 디자인의 진행률 표시줄 구성 요소로 전문 비즈니스 또는 기업 웹사이트에 적합합니다. 반응형 디자인이며 Tailwind CSS를 사용하여 다크 모드를 지원합니다.

열다