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

Progress Bar 구성 요소

머티리얼 디자인(Material Design)의 영향을 받은 단순하고 반응이 빠른 프로그레스 바 컴포넌트로, 따뜻한 일몰 톤을 사용합니다. 기술/SaaS 애플리케이션에 이상적이며, 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="p-6 sm:p-8">
      <h2 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Upload Progress</h2>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-6">Uploading your files. Please wait...</p>

      <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 sm:h-3.5 mb-2 relative overflow-hidden shadow-inner">
        <div class="bg-gradient-to-r from-red-500 to-orange-400 h-full rounded-full dark:from-red-600 dark:to-orange-500 transition-all duration-500 ease-out" style="width: 75%;"></div>
        <div class="absolute top-0 right-0 h-full w-4 bg-white dark:bg-gray-800 opacity-20 transform -skew-x-12" style="margin-left: -2px;"></div>
      </div>

      <div class="flex justify-between items-center text-sm font-medium text-gray-700 dark:text-gray-300">
        <span>75% Complete</span>
        <span>3 of 4 files</span>
      </div>

      <div class="mt-6 flex justify-end">
        <button class="px-4 py-2 sm:px-5 sm:py-2.5 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-md font-semibold text-sm hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75 transition duration-150 ease-in-out">
          Cancel
        </button>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

Brutalist_ProgressBar

마켓플레이스 플랫폼에 적합한 고대비의 브루탈리즘 스타일의 진행률 표시줄 구성 요소로, 대담한 색상과 단순한 레이아웃, 완전한 응답성과 다크 모드 지원을 제공합니다.

열다

뉴모픽 프로그레스 바

뉴모피즘(Neumorphism) 스타일로 디자인된 반응형 프로그레스 바 컴포넌트로, Tailwind CSS를 사용하여 밝은 테마와 어두운 테마를 모두 지원합니다.

열다

Progress Bar 구성 요소

정부/공공 서비스를 위한 복잡하고 반응이 빠른 진행률 표시줄 구성 요소로, 단색 팔레트와 밝은 액센트가 있는 깔끔하고 미니멀한 디자인, 다크 모드 지원 및 자세한 진행률 정보를 특징으로 합니다.

열다