CCHub Logo CCHub Tailwind Collection
구성 요소 진행률 표시줄 Industrial_Travel_Progress_Bar

Industrial_Travel_Progress_Bar

여행/관광 웹사이트를 위한 간단한 산업 스타일의 진행률 표시줄 구성 요소로, 보라색/보라색 색 구성표와 다크 모드 지원으로 완전한 응답성을 제공합니다.

미리 보기

HTML 코드 

<div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">

  <div class="w-full max-w-xl bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md overflow-hidden border border-gray-300 dark:border-gray-700">
    <div class="p-4 sm:p-5 md:p-6 bg-gray-300 dark:bg-gray-700 border-b border-gray-400 dark:border-gray-600">
      <h2 class="text-lg sm:text-xl font-bold text-gray-800 dark:text-gray-100 uppercase tracking-wide">Your Travel Progress</h2>
      <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Booking steps completed</p>
    </div>

    <div class="p-4 sm:p-5 md:p-6">

      <div class="mb-4">
        <label for="progress-bar" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Booking Confirmation (75%)</label>
        <div class="w-full bg-violet-200 dark:bg-violet-950 rounded-full h-3 relative overflow-hidden">
          <div class="bg-violet-700 dark:bg-violet-400 h-full rounded-full transition-all duration-500 ease-out" style="width: 75%;"></div>
          <span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-white dark:text-gray-900" style="text-shadow: 0 0 2px rgba(0,0,0,0.5);"></span>
        </div>
      </div>

      <div class="mb-4">
        <label for="progress-bar" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Flight Selection (Complete)</label>
        <div class="w-full bg-violet-200 dark:bg-violet-950 rounded-full h-3 relative overflow-hidden">
          <div class="bg-violet-700 dark:bg-violet-400 h-full rounded-full transition-all duration-500 ease-out" style="width: 100%;"></div>
          <svg class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-3 w-3 text-white dark:text-gray-900" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
          </svg>
        </div>
      </div>

      <div class="mb-4 last:mb-0">
        <label for="progress-bar" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Accommodation (50%)</label>
        <div class="w-full bg-violet-200 dark:bg-violet-950 rounded-full h-3 relative overflow-hidden">
          <div class="bg-violet-700 dark:bg-violet-400 h-full rounded-full transition-all duration-500 ease-out" style="width: 50%;"></div>
          <span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-white dark:text-gray-900" style="text-shadow: 0 0 2px rgba(0,0,0,0.5);"></span>
        </div>
      </div>

    </div>
  </div>

</div>

관련 구성 요소

사진 촬영을 위한 그라데이션 레인보우 프로그레스 바

사진 포트폴리오를 위한 복잡하고 반응이 빠른 진행률 표시줄 구성 요소로, 멀티 컬러 그라데이션 무지개 디자인과 다크 모드 지원을 특징으로 합니다. 사진 로딩 또는 갤러리 진행을 보여주는 데 이상적입니다.

열다

Glassmorphism_EarthTones_ProgressBar_ForumComponent

흙색이 있는 반응형 glassmorphism 진행률 표시줄 구성 요소로, 포럼 또는 커뮤니티 플랫폼에 적합합니다. 반투명 유리와 같은 반투명 요소가 특징이며 흐림 효과와 다크 모드를 지원합니다.

열다

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

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

열다