CCHub Logo CCHub Tailwind Collection
구성 요소 진행률 표시줄 전자 상거래 주문 진행률 표시줄

전자 상거래 주문 진행률 표시줄

다크 모드를 지원하는 전자 상거래를 위한 반응형 진행률 표시줄 구성 요소로, 단색 디자인이 특징입니다. JavaScript는 없으며 HTML 및 Tailwind CSS 만 있습니다.

미리 보기

HTML 코드 

<div class="dark:bg-gray-900 min-h-screen p-4 flex items-center justify-center">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Order Progress</h2>

    <div class="mb-8">
      <div class="flex justify-between mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Order Placed</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">100%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
        <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 100%;"></div>
      </div>
    </div>

    <div class="mb-8">
      <div class="flex justify-between mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Processing</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">75%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
        <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 75%;"></div>
      </div>
    </div>

    <div class="mb-8">
      <div class="flex justify-between mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Shipped</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">50%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
        <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 50%;"></div>
      </div>
    </div>

    <div class="mb-8">
      <div class="flex justify-between mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Out for Delivery</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">25%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
        <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 25%;"></div>
      </div>
    </div>

    <div>
      <div class="flex justify-between mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Delivered</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">0%</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
        <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 0%;"></div>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

진행률 표시줄

Microinteractions 디자인이 있는 Progress Bar 구성 요소. HTML 및 CSS(Tailwind CSS)만 사용하는 반응형 효과 및 어두운 테마 지원이 포함됩니다.

열다

Progress Bar 구성 요소

머티리얼 디자인 스타일로 디자인된 반응형 진행률 표시줄 구성 요소로, 포트폴리오 쇼케이스를 위한 파스텔 색 구성표를 통합합니다. 다크 모드를 지원합니다.

열다

3D 그레이스케일 스포츠 피트니스 프로그레스 바

스포츠 및 피트니스 애플리케이션을 위해 설계된 복잡한 3D 그레이스케일 진행률 표시줄 구성 요소로, 깊이와 시각적 참여로 트레이닝 진행 상황을 보여줍니다. 다크 모드 지원이 포함되어 있으며 완벽하게 반응합니다.

열다