CCHub Logo CCHub Tailwind Collection
구성 요소 진행률 표시줄 미니멀리스트 트라이어딕 프로그레스 바

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

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

미리 보기

HTML 코드 


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

관련 구성 요소

스큐어모픽 프로그레스 바

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

열다

뉴모피즘 프로그레스 바

대시보드용으로 설계된 반응형 뉴모피즘 스타일의 진행률 표시줄 구성 요소로, 대화형 기능을 통합하고 다크 모드를 지원합니다.

열다

Skeuomorphic_Monochromatic_Progress_Bar

전자 상거래를 위한 중간 복잡성의 스큐어모픽 진행률 표시줄 구성 요소로, 단색 색 구성표, 완전한 응답성 및 다크 모드 지원을 특징으로 합니다.

열다