Progress Bar 구성 요소

3D 요소로 디자인된 반응형 진행률 표시줄 구성 요소로, 전자 상거래에 적합한 유사한 색 구성표를 사용하며 다크 모드를 지원합니다.

미리 보기

HTML 코드

<div class="max-w-md mx-auto p-4">
    <div class="relative h-8 bg-gray-300 rounded-md overflow-hidden dark:bg-gray-700">
        <div class="absolute inset-0 transition-all duration-300 ease-out bg-gradient-to-r from-green-400 to-blue-400 dark:from-green-600 dark:to-blue-600" style="width: 70%;"></div>
        <div class="absolute inset-0 flex items-center justify-center text-white font-semibold">
            70%
        </div>
    </div>
    <div class="mt-4 text-gray-700 dark:text-gray-300">
        <p class="text-sm">Progress towards your shopping goals.</p>
    </div>
</div>

관련 구성 요소

ProgressBar구성 요소

음식/레스토랑 웹사이트를 위한 네온/일렉트릭 색상의 간단하고 깨끗하며 반응이 빠른 진행률 표시줄 구성 요소로, 다크 모드 지원 및 스위스/국제 타이포그래피 디자인이 특징입니다.

열다

Glassmorphism 프로그레스 바

소셜 미디어 인터페이스용으로 설계된 Glassmorphism 스타일의 진행률 표시줄은 생생한 색상과 다크 모드를 지원합니다. JavaScript가 없는 간단한 레이아웃.

열다

뉴모피즘 프로그레스 바

포트폴리오를 위한 뉴모피즘(Neumorphism) 스타일의 진행 표시줄은 파스텔 색상 구성표, 적당한 복잡성, 응답성 및 어두운 테마 지원을 특징으로 합니다. JavaScript는 포함되어 있지 않습니다. 구성 요소는 HTML 및 Tailwind CSS로 빌드됩니다.

열다