검색 구성 요소

카테고리

구성 요소 진행률 표시줄

진행률 표시줄

완료 진행 상황을 보여주는 표시기

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

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

열다 미리 보기

                <div class="p-4 sm:p-6 md:p-8 bg-[#1a1a2e] dark:bg-gray-900 min-h-screen flex items-center justify-center font-mono text-gray-200">
  <div class="w-full max-w-2xl bg-[#0f0f20] dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-[#00f7ff33] dark:border-gray-700">
    <div class="p-4 sm:p-6 md:p-8 relative">
      <div class="text-lg sm:text-xl md:text-2xl font-bold text-[#00f7ff] dark:text-[#a0a0ff] mb-4 sm:mb-6 uppercase tracking-wider before:content-[''] before:absolute before:left-0 before:top-0 before:w-1 before:h-full before:bg-[#00f7ff]">Now Playing: Interstellar Echoes</div>
      <p class="text-sm sm:text-base text-gray-400 mb-6 sm:mb-8">Track 3 of 12 - Dreamscape Protocol</p>

      <!-- Progress Bar Container -->
      <div class="w-full bg-[#3c3c5a] dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden relative mb-4 sm:mb-6">
        <div class="absolute top-0 left-0 h-full rounded-full transition-all duration-500 ease-out"
             style="width: 65%; background-color: #ff5757; box-shadow: 0 0 8px #ff5757, 0 0 16px #ff5757;"
             aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" role="progressbar">
        </div>
        <div class="absolute top-0 left-1/3 w-1 bg-gray-500 rounded-full h-full"></div>
        <div class="absolute top-0 left-2/3 w-1 bg-gray-500 rounded-full h-full"></div>
      </div>

      <!-- Time Display -->
      <div class="flex justify-between text-xs sm:text-sm text-gray-400 mb-6 sm:mb-8">
        <span class="text-[#ff5757]">02:45</span>
        <span>04:10</span>
      </div>

      <!-- Control Buttons -->
      <div class="flex justify-center items-center space-x-6 sm:space-x-8 text-xl sm:text-2xl">
        <button class="text-[#82e0ff] dark:text-[#c0c0ff] hover:text-[#00f7ff] dark:hover:text-[#a0a0ff] transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-[#82e0ff] rounded-md p-1" aria-label="Previous Track">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-8 sm:w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
          </svg>
        </button>
        <button class="text-[#82e0ff] dark:text-[#c0c0ff] hover:text-[#00f7ff] dark:hover:text-[#a0a0ff] transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-[#82e0ff] rounded-full p-2 sm:p-3 border border-[#82e0ff] dark:border-[#c0c0ff] hover:border-[#00f7ff] dark:hover:border-[#a0a0ff] shadow-md shadow-[#82e0ff]/30">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 sm:h-10 sm:w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.125l-3.359-3.359A.858.858 0 0010 8.358v7.284a.858.858 0 001.393.616l3.359-3.359a.858.858 0 00-.001-1.234zM12 21a9 9 0 110-18 9 9 0 010 18z" />
          </svg>
        </button>
        <button class="text-[#82e0ff] dark:text-[#c0c0ff] hover:text-[#00f7ff] dark:hover:text-[#a0a0ff] transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-[#82e0ff] rounded-md p-1" aria-label="Next Track">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 sm:h-8 sm:w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

Bauhaus 프로그레스 바 구성 요소

엔터테인먼트/미디어 플랫폼에 적합한 적당히 복잡하고 반응성이 뛰어난 Bauhaus에서 영감을 받은 진행률 표시줄 구성 요소로, 멋진 중립 및 다크 모드 지원을 특징으로 합니다.

열다 미리 보기

                <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 tracking-wide">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="p-6 sm:p-8 space-y-6">
      <div class="flex items-center justify-between">
        <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white">Now Playing</h2>
        <svg class="h-8 w-8 text-gray-500 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h4l1-1 1-4m-7-10l7-10m7 10l-7 10m7-10l-4-4m-3 0L3 17l1-1h4l1-1 1-4m-7-10l7-10m7 10l-7 10m7-10l-4-4m-3 0L3 17l1-1h4l1-1 1-4m-7-10l7-10m7 10l-7 10m7-10l-4-4m-3 0L3 17l1-1h4l1-1 1-4"></path>
        </svg>
      </div>

      <div class="relative w-full rounded-full h-3 bg-gray-200 dark:bg-gray-700 overflow-hidden group">
        <div class="absolute top-0 left-0 h-full bg-blue-500 dark:bg-blue-600 rounded-full transition-all duration-500 ease-out" style="width: 65%;"></div>
        <div class="absolute top-1/2 -translate-y-1/2 left-[65%] w-4 h-4 bg-gray-900 dark:bg-gray-200 rounded-full border-2 border-gray-900 dark:border-gray-200 group-hover:scale-125 transition-transform duration-200 ease-out"></div>
      </div>

      <div class="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400 font-medium">
        <span class="text-gray-900 dark:text-white">03:45</span>
        <span>05:30</span>
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 items-center pt-4">
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/id/1047/100/100" alt="Album Art" class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg object-cover border-2 border-gray-300 dark:border-gray-600">
          <div>
            <p class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white leading-tight">Geometric Dreams</p>
            <p class="text-md sm:text-lg text-gray-600 dark:text-gray-400 mt-1">The Bauhaus Ensemble</p>
          </div>
        </div>

        <div class="flex justify-around sm:justify-end space-x-6">
          <button class="p-3 sm:p-4 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800">
            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.75 19l-7.5-7.5 7.5-7.5" />
            </svg>
          </button>
          <button class="p-4 sm:p-5 rounded-full bg-blue-500 text-white shadow-lg hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800">
            <svg class="h-7 w-7" fill="currentColor" viewBox="0 0 24 24">
              <path fill-rule="evenodd" d="M6 5v14a1 1 0 001.5 1.32l11-7a1 1 0 000-1.64l-11-7A1 1 0 006 5z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="p-3 sm:p-4 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800">
            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

ProgressBar구성 요소

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

열다 미리 보기

                <div class="font-sans antialiased bg-gray-50 dark:bg-gray-900 p-4 sm:p-6 md:p-8 lg:p-10 flex min-h-screen items-center justify-center">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 sm:p-8 md:p-10 leading-tight border border-gray-200 dark:border-gray-700">
    <h2 class="text-xl sm:text-2xl md:text-3xl font-extrabold text-gray-900 dark:text-white mb-2 sm:mb-3 md:mb-4 tracking-tight">
      Your Order Progress
    </h2>
    <p class="text-sm sm:text-base text-gray-600 dark:text-gray-300 mb-6 sm:mb-8 md:mb-10">
      Keep an eye on your delicious order's journey!
    </p>

    <div class="mb-6 sm:mb-8 md:mb-10">
      <div class="flex justify-between items-center mb-2">
        <span class="text-lg sm:text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-pink-500 dark:from-red-400 dark:to-pink-400">
          Preparing Your Feast
        </span>
        <span class="text-sm sm:text-base font-semibold text-gray-800 dark:text-gray-200">
          75%
        </span>
      </div>
      <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3">
        <div class="bg-gradient-to-r from-fuchsia-500 to-pink-500 dark:from-fuchsia-400 dark:to-pink-400 h-3 rounded-full" style="width: 75%;">
        </div>
      </div>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-center sm:text-left">
      <div class="space-y-1">
        <p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 uppercase tracking-wider">
          Estimated Delivery
        </p>
        <p class="text-base sm:text-lg md:text-xl font-bold text-gray-900 dark:text-white">
          15-20 min
        </p>
      </div>
      <div class="space-y-1">
        <p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 uppercase tracking-wider">
          Order ID
        </p>
        <p class="text-base sm:text-lg md:text-xl font-bold text-gray-900 dark:text-white break-all">
          #FDRM_87Y5XC
        </p>
      </div>
    </div>

  </div>
</div>

Luxury_Grayscale_Social_Media_Progress_Bar

소셜 미디어 인터페이스를 위한 복잡하고 우아하며 반응이 빠른 진행률 표시줄 구성 요소로, 정교한 타이포그래피와 다크 모드를 지원하는 그레이스케일 럭셔리 디자인이 특징입니다.

열다 미리 보기

                <div class="font-sans antialiased bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-4 sm:p-6 md:p-8 lg:p-10">
  <div class="max-w-3xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden">
    <div class="p-6 sm:p-8 md:p-10">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-6 tracking-tight dark:text-white">Profile Completion</h2>
      <p class="text-md sm:text-lg text-center text-gray-600 dark:text-gray-300 mb-8 max-w-xl mx-auto leading-relaxed">
        Enhance your presence by completing your profile. The more complete it is, the more opportunities you'll discover.
      </p>

      <!-- Main Progress Bar -->
      <div class="mb-10">
        <div class="flex justify-between items-center mb-2">
          <span class="text-lg font-semibold text-gray-700 dark:text-gray-200">Overall Progress</span>
          <span class="text-xl font-bold text-gray-900 dark:text-white">75%</span>
        </div>
        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 sm:h-4 overflow-hidden">
          <div class="bg-gradient-to-r from-gray-600 to-gray-900 dark:from-gray-300 dark:to-gray-500 h-full rounded-full" style="width: 75%;"></div>
        </div>
      </div>

      <!-- Detailed Steps -->
      <div class="space-y-6">

        <!-- Step 1: Basic Info -->
        <div class="flex items-center space-x-4">
          <div class="flex-shrink-0 w-10 h-10 rounded-full bg-gray-900 dark:bg-gray-300 flex items-center justify-center">
            <svg class="w-6 h-6 text-white dark:text-gray-900" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 9.354V10a5 5 0 00-10 0v9.354m0 0a5 5 0 00-10 0v-9.354"></path>
            </svg>
          </div>
          <div class="flex-grow">
            <div class="flex justify-between items-center">
              <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Basic Profile Information</h3>
              <span class="text-sm font-medium text-gray-600 dark:text-gray-400">100%</span>
            </div>
            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mt-1">
              <div class="bg-gray-700 dark:bg-gray-400 h-full rounded-full" style="width: 100%;"></div>
            </div>
          </div>
          <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 px-3 py-1 rounded-md text-sm transition duration-300 ease-in-out">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </button>
        </div>

        <!-- Step 2: Professional Details -->
        <div class="flex items-center space-x-4 opacity-75">
          <div class="flex-shrink-0 w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center">
            <svg class="w-6 h-6 text-gray-700 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 4h2a2 2 0 012 2v10a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2m8 0h.01M6 16h.01"></path>
            </svg>
          </div>
          <div class="flex-grow">
            <div class="flex justify-between items-center">
              <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Professional &amp; Experience</h3>
              <span class="text-sm font-medium text-gray-600 dark:text-gray-400">50%</span>
            </div>
            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mt-1">
              <div class="bg-gray-700 dark:bg-gray-400 h-full rounded-full" style="width: 50%;"></div>
            </div>
          </div>
          <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 px-3 py-1 rounded-md text-sm transition duration-300 ease-in-out">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </button>
        </div>

        <!-- Step 3: Interests and Skills -->
        <div class="flex items-center space-x-4 opacity-50">
          <div class="flex-shrink-0 w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center">
            <svg class="w-6 h-6 text-gray-700 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 4l-4 4 4 4"></path>
            </svg>
          </div>
          <div class="flex-grow">
            <div class="flex justify-between items-center">
              <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Interests &amp; Skills</h3>
              <span class="text-sm font-medium text-gray-600 dark:text-gray-400">25%</span>
            </div>
            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mt-1">
              <div class="bg-gray-700 dark:bg-gray-400 h-full rounded-full" style="width: 25%;"></div>
            </div>
          </div>
          <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 px-3 py-1 rounded-md text-sm transition duration-300 ease-in-out">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </button>
        </div>

        <!-- Step 4: Social Links -->
        <div class="flex items-center space-x-4 opacity-25">
          <div class="flex-shrink-0 w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center">
            <svg class="w-6 h-6 text-gray-700 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.102 1.101m-.757-4.898l-4 4a4 4 0 105.656 5.656l1.102-1.101"></path>
            </svg>
          </div>
          <div class="flex-grow">
            <div class="flex justify-between items-center">
              <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Social Media Links</h3>
              <span class="text-sm font-medium text-gray-600 dark:text-gray-400">0%</span>
            </div>
            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mt-1">
              <div class="bg-gray-700 dark:bg-gray-400 h-full rounded-full" style="width: 0%;"></div>
            </div>
          </div>
          <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 px-3 py-1 rounded-md text-sm transition duration-300 ease-in-out">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </button>
        </div>
      </div>

      <!-- Call to Action -->
      <div class="mt-10 text-center">
        <button class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-full shadow-lg text-white bg-gray-900 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition duration-300 ease-in-out
                              dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-300 dark:focus:ring-gray-400">
          Complete Your Profile
          <svg class="ml-3 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
        </button>
      </div>
    </div>

    <!-- Decorative Footer -->
    <div class="p-4 bg-gray-100 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 text-center text-gray-500 dark:text-gray-400 text-sm">
      <p>Your privacy is important to us. Information shared helps connect you with relevant opportunities.</p>
    </div>

  </div>
</div>

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

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

열다 미리 보기

                <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>

미니멀리스트 트라이어딕 프로그레스 바

트라이어딕 색 구성표와 어두운 테마 지원이 있는 미니멀하고 반응이 빠른 진행률 표시줄로 소셜 미디어 응용 프로그램에 적합합니다.

열다 미리 보기

                
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">

  <!-- Progress Bar Container -->
  <div class="w-full max-w-md bg-cyan-200 dark:bg-cyan-800 rounded-full h-4 mb-4 relative">
    <!-- Progress Indicator - Using an arbitrary value with [] for demonstration -->
    <div class="bg-fuchsia-500 dark:bg-fuchsia-400 h-4 rounded-full" style="width: 75%;">
      <span class="absolute right-2 top-0 text-xs font-semibold text-gray-700 dark:text-gray-300">75%</span>
    </div>
  </div>

  <!-- Another Progress Bar Example -->
  <div class="w-full max-w-md bg-cyan-200 dark:bg-cyan-800 rounded-full h-4 relative">
    <div class="bg-yellow-500 dark:bg-yellow-400 h-4 rounded-full" style="width: 50%;">
      <span class="absolute right-2 top-0 text-xs font-semibold text-gray-700 dark:text-gray-300">50%</span>
    </div>
  </div>

</div>