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

Progress Indicators 구성 요소

소셜 미디어 인터페이스에 적합한 뉴모픽 스타일의 진행률 표시기로, 다크 모드를 지원하는 간단한 레이아웃과 반응형 디자인이 특징입니다.

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center p-6">
  <div class="w-full max-w-xs p-4 bg-gray-200 rounded-lg shadow-lg dark:bg-gray-800 dark:shadow-md">
    <h3 class="text-center text-lg font-semibold text-gray-800 dark:text-gray-200">Profile Completion</h3>
    <div class="my-4">
      <div class="flex justify-between">
        <span class="text-sm text-gray-600 dark:text-gray-400">0%</span>
        <span class="text-sm text-gray-600 dark:text-gray-400">100%</span>
      </div>
      <div class="h-2 bg-gray-300 rounded-lg dark:bg-gray-700">
        <div class="h-full bg-gradient-to-r from-green-400 to-blue-500 rounded-lg" style="width: 70%;"></div>
      </div>
    </div>
    <div class="flex items-center justify-between">
      <img src="https://picsum.photos/40" alt="User Avatar" class="rounded-full border-2 border-gray-300 dark:border-gray-600" />
      <span class="text-sm text-gray-800 dark:text-gray-200">User Name</span>
    </div>
  </div>
</div>

관련 구성 요소

Progress Indicators 구성 요소

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

열다

ArtDecoProgressIndicator

직업/경력 플랫폼을 위한 복잡한 아르데코에서 영감을 받은 진행 상태 표시기 구성 요소로, 기하학적 패턴, 고급스러운 스타일링 및 보색을 특징으로 합니다. 다크 모드 지원으로 완벽하게 반응합니다.

열다

Progress Indicators 구성 요소

따뜻한 일몰 톤의 간단하고 깨끗하며 전문적인 진행 표시기 구성 요소로 비즈니스 및 컨설팅 서비스에 적합하며 반응형 디자인과 다크 모드 지원을 특징으로 합니다.

열다