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>

관련 구성 요소

전자 상거래 Professional Progress Bar

전자 상거래를 위해 설계된 복잡하고 반응이 빠른 진행률 표시줄 구성 요소로, 가을 색 구성표(진한 주황색, 갈색, 부르고뉴)를 특징으로 하고 다크 모드를 지원합니다. 기업 환경에 깨끗하고 전문적인 모습을 제공합니다.

열다

Progress Bar 구성 요소

최신 웹 애플리케이션에 적합한 Tailwind CSS를 사용하여 다크 모드용으로 설계된 반응형 진행률 표시줄 구성 요소입니다.

열다

3D 프로그레스 바 컴포넌트

소셜 네트워킹 인터페이스용으로 설계된 반응형 진행률 표시줄 구성 요소로, Tailwind CSS를 사용하여 구축된 3D 효과, 단색 색 구성표 및 다크 모드 지원을 특징으로 합니다.

열다