Progress Bar 구성 요소

전자 상거래 애플리케이션을 위한 회색조 색 구성표가 있는 브루탈리즘 디자인 스타일의 간단한 진행률 표시줄 구성 요소입니다. 반응형이며 다크 모드를 지원합니다.

미리 보기

HTML 코드

<div class="w-full max-w-md mx-auto p-4">
    <h2 class="text-white text-xl font-bold mb-2">Loading Your Items...</h2>
    <div class="bg-gray-300 dark:bg-gray-700 rounded-full h-6">
        <div class="bg-black dark:bg-white h-6 rounded-full" style="width: 70%;"></div>
    </div>
    <div class="flex justify-between mt-2">
        <span class="text-gray-500 dark:text-gray-300 text-sm">0%</span>
        <span class="text-gray-500 dark:text-gray-300 text-sm">70%</span>
    </div>
</div>

관련 구성 요소

Brutalist_ProgressBar

마켓플레이스 플랫폼에 적합한 고대비의 브루탈리즘 스타일의 진행률 표시줄 구성 요소로, 대담한 색상과 단순한 레이아웃, 완전한 응답성과 다크 모드 지원을 제공합니다.

열다

Progress Bar 구성 요소

정부/공공 서비스를 위한 복잡하고 반응이 빠른 진행률 표시줄 구성 요소로, 단색 팔레트와 밝은 액센트가 있는 깔끔하고 미니멀한 디자인, 다크 모드 지원 및 자세한 진행률 정보를 특징으로 합니다.

열다

스큐어모픽 프로그레스 바

포트폴리오를 위한 스큐어모픽 프로그레스 바 구성 요소로, 단색 색 구성표와 Tailwind CSS를 사용하여 반응형 및 다크 모드를 지원하는 복잡한 인터랙티브 디자인을 특징으로 합니다.

열다