CCHub Logo CCHub Tailwind Collection
구성 요소 진행률 표시줄 트라이어딕 다크 모드 프로그레스 바

트라이어딕 다크 모드 프로그레스 바

다크 모드를 위한 단순하고 삼각형 색상의 진행률 표시줄 구성 요소로, 블로그 및 콘텐츠 소비에 적합합니다. Tailwind CSS를 사용한 반응형 디자인이 특징이며, JavaScript 없이 어두운 테마 지원을 위해 dark: 접두사를 사용합니다.

미리 보기

HTML 코드 

<div class="dark:bg-gray-900 p-4">
  <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Reading Progress</h2>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-4">
    <div class="dark:bg-purple-500 h-2.5 rounded-full" style="width: 45%;"></div>
  </div>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-4">
    <div class="dark:bg-yellow-500 h-2.5 rounded-full" style="width: 60%;"></div>
  </div>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
    <div class="dark:bg-emerald-500 h-2.5 rounded-full" style="width: 75%;"></div>
  </div>
</div>

관련 구성 요소

Progress Bar 구성 요소

파스텔 색상 구성표가 있는 다크 모드용으로 설계된 반응형 진행률 표시줄 구성 요소로, 비즈니스/기업 웹 사이트에 적합합니다.

열다

진행률 표시줄

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

열다

Progress Bar 구성 요소

glassmorphism 및 단색 색상으로 스타일링된 간단한 진행률 표시줄 구성 요소로, 비즈니스 및 기업 웹 사이트에 적합하며 다크 모드를 지원합니다.

열다