CCHub Logo CCHub Tailwind Collection
구성 요소 진행률 표시줄 진행률 표시줄

진행률 표시줄

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

미리 보기

HTML 코드 

<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
  <div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%; animation: progress-animation 2s infinite;"></div>
</div>

<style>
@keyframes progress-animation {
  0% { width: 0%; }
  100% { width: 45%; }
}

.dark .bg-blue-600 {
  background-color: #90cdf4; /* Lighter blue for dark mode */
}

/* Responsive considerations */
@media (max-width: 768px) {
  @keyframes progress-animation {
    0% { width: 0%; }
    100% { width: 60%; } /* Wider progress on smaller screens */
  }
  .bg-blue-600 {
    animation: progress-animation 2s infinite; /* Apply animation again for clarity */
  }
}
</style>

관련 구성 요소

뉴모피즘 프로그레스 바

Tailwind CSS를 사용하여 Neumorphism 디자인, 반응형 효과 및 어두운 테마를 지원하는 프로그레스 바 구성 요소

열다

Progress Bar 구성 요소

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

열다

Organic_Nature_ProgressBar

산업 및 제조 응용 분야를 위한 자연에서 영감을 받은 복고풍 테마의 진행률 표시줄 구성 요소로, 흐르는 선, 음소거된 색상 및 다크 모드 지원을 특징으로 합니다.

열다