CCHub Logo CCHub Tailwind Collection
구성 요소 진행 표시기 Progress Indicators 구성 요소

Progress Indicators 구성 요소

이것은 반응형 효과와 어두운 테마를 지원하는 Tailwind CSS를 사용하는 Material Design 스타일의 진행률 표시기 구성 요소입니다.

미리 보기

HTML 코드 

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

  <!-- Linear Progress Bar -->
  <div class="w-64 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden shadow-md">
    <div class="h-full bg-blue-500 dark:bg-blue-400 w-3/4 rounded-full animate-pulse"></div>
  </div>

  <!-- Spacer -->
  <div class="my-8"></div>

  <!-- Circular Progress Indicator -->
  <div class="relative">
    <div class="w-16 h-16 border-4 border-blue-500 dark:border-blue-400 border-t-transparent border-solid rounded-full animate-spin shadow-md"></div>
    <div class="absolute top-0 left-0 w-16 h-16 flex items-center justify-center text-blue-700 dark:text-blue-300 font-bold">
      75%
    </div>
  </div>

  <!-- Spacer -->
  <div class="my-8"></div>

  <!-- Linear Progress Bar with Label -->
  <div class="w-64">
    <div class="flex justify-between mb-1 text-gray-700 dark:text-gray-300">
      <span class="text-base font-medium">Progress</span>
      <span class="text-sm font-medium">45%</span>
    </div>
    <div class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden shadow-md">
      <div class="h-full bg-green-500 dark:bg-green-400 w-[45%] rounded-full" style="width: 45%;"></div>
    </div>
  </div>

</div>

관련 구성 요소

Progress Indicators 구성 요소

반응형 Progress Indicators 컴포넌트는 유사한 색 구성표를 가진 다크 모드 UI 대시보드용으로 설계되었습니다. 여기에는 막대, 원 및 활동 피드와 같은 다양한 진행률 표시기가 포함되어 있으며 모두 다크 모드 지원을 위해 Tailwind CSS로 스타일이 지정되었습니다. JavaScript는 사용되지 않습니다.

열다

Progress Indicators 구성 요소

Brutalism 디자인, 흙빛 색조 및 어두운 테마 지원을 갖춘 반응형 진행률 표시기 구성 요소는 블로그 또는 콘텐츠 사이트에 적합합니다.

열다

Progress Indicators 구성 요소

유리 형태 효과로 설계된 간단한 진행률 표시기로, 다크 모드를 지원하고 단색 색 구성표가 있는 전자 상거래 웹 사이트에 적합합니다.

열다