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

Progress Indicators 구성 요소

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

미리 보기

HTML 코드 

<div class="min-h-screen bg-stone-100 dark:bg-stone-900 p-8 flex flex-col items-center justify-center font-mono">
  <div class="w-full max-w-2xl bg-stone-300 dark:bg-stone-700 border-4 border-stone-900 dark:border-stone-100 p-6 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] mb-8">
    <h1 class="text-3xl md:text-5xl text-stone-900 dark:text-stone-100 mb-6 border-b-4 border-stone-900 dark:border-stone-100 pb-2">Article Progress</h1>
    
    <!-- Progress Bar 1 -->
    <div class="mb-6">
      <h2 class="text-xl md:text-2xl text-stone-800 dark:text-stone-200 mb-2">Section 1: Introduction</h2>
      <div class="w-full h-8 bg-stone-500 dark:bg-stone-600 border-4 border-stone-900 dark:border-stone-100 overflow-hidden">
        <div class="h-full bg-amber-700 dark:bg-amber-400" style="width: 30%;"></div>
      </div>
      <p class="text-stone-700 dark:text-stone-300 mt-1 text-sm">30% Completed</p>
    </div>

    <!-- Progress Bar 2 -->
    <div class="mb-6">
      <h2 class="text-xl md:text-2xl text-stone-800 dark:text-stone-200 mb-2">Section 2: Core Concepts</h2>
      <div class="w-full h-8 bg-stone-500 dark:bg-stone-600 border-4 border-stone-900 dark:border-stone-100 overflow-hidden">
        <div class="h-full bg-amber-700 dark:bg-amber-400" style="width: 65%;"></div>
      </div>
      <p class="text-stone-700 dark:text-stone-300 mt-1 text-sm">65% Completed</p>
    </div>

    <!-- Progress Bar 3 -->
    <div class="mb-6">
      <h2 class="text-xl md:text-2xl text-stone-800 dark:text-stone-200 mb-2">Section 3: Conclusion</h2>
      <div class="w-full h-8 bg-stone-500 dark:bg-stone-600 border-4 border-stone-900 dark:border-stone-100 overflow-hidden">
        <div class="h-full bg-amber-700 dark:bg-amber-400" style="width: 10%;"></div>
      </div>
      <p class="text-stone-700 dark:text-stone-300 mt-1 text-sm">10% Completed</p>
    </div>

    <!-- Article Completion Indicator -->
    <div class="mt-8 pt-4 border-t-4 border-stone-900 dark:border-stone-100">
      <h2 class="text-2xl md:text-3xl text-stone-900 dark:text-stone-100 mb-4">Overall Article Progress</h2>
      <div class="w-full bg-stone-500 dark:bg-stone-600 border-4 border-stone-900 dark:border-stone-100 h-10 flex items-center justify-center relative">
        <div class="h-full bg-green-700 dark:bg-green-400 transition-all duration-700 ease-out" style="width: 45%;"></div>
        <span class="absolute text-stone-100 dark:text-stone-900 text-lg font-bold">45% Complete</span>
      </div>
      <p class="text-stone-700 dark:text-stone-300 mt-2 text-sm text-center">Keep reading to finish the article!</p>
    </div>

  </div>
</div>

관련 구성 요소

Progress Indicators 구성 요소

브루탈리즘 스타일의 진행 지표 구성 요소로, 고대비를 가지고 있으며, 포트폴리오에서 작업이나 제품을 보여줍니다. Tailwind CSS를 사용하여 어두운 테마 지원으로 반응하도록 설계된 여러 대화형 요소가 있는 풍부한 인터페이스를 제공합니다.

열다

Progress Indicators 구성 요소

소셜 미디어 애플리케이션을 위한 glassmorphism 스타일의 진행률 표시기 구성 요소로, 흐림 효과가 있는 젖빛 유리와 같은 반투명 요소를 특징으로 합니다. 유사한 색 구성표를 사용하며 여러 대화형 요소가 있는 복잡하고 풍부한 인터페이스를 제공합니다. 구성 요소는 반응형이며 Tailwind CSS에서 어두운 테마를 지원합니다.

열다

Progress Indicators 구성 요소

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

열다