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

Progress Bar 구성 요소

Tailwind CSS를 사용하여 다크 모드를 염두에 두고 설계된 반응형 진행률 표시줄 구성 요소입니다.

미리 보기

HTML 코드 

<div class="flex items-center justify-center h-screen bg-gray-900">
  <div class="w-full max-w-md">
    <h2 class="text-white text-lg font-semibold mb-4">Progress Bar</h2>
    <div class="relative pt-1">
      <div class="flex items-center justify-between mb-2">
        <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200">
          70%
        </span>
        <span class="text-xs font-semibold inline-block text-gray-400">
          7/10
        </span>
      </div>
      <div class="h-2 bg-gray-700 rounded">
        <div class="h-full bg-teal-500 rounded" style="width: 70%;"></div>
      </div>
    </div>
    <p class="text-gray-400 text-sm mt-2">Loading...</p>
  </div>
</div>

관련 구성 요소

Glassmorphism_EarthTones_ProgressBar_ForumComponent

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

열다

스큐어모픽 프로그레스 바

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

열다

머티리얼 디자인 흙빛 진행률 표시줄

머티리얼 디자인에서 영감을 받은 어스 톤의 진행률 표시줄로, 소셜 미디어 인터페이스에 적합합니다. 반응형이며 Tailwind CSS를 사용하는 다크 모드 지원이 포함됩니다.

열다