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

Progress Indicators 구성 요소

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

미리 보기

HTML 코드 

<div class="min-h-screen bg-gray-900 text-gray-100 p-8 dark:bg-gray-900">
  <h1 class="text-4xl font-bold mb-8 text-indigo-400">Dashboard Progress</h1>

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

    <!-- Progress Bar 1 -->
    <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
      <h2 class="text-2xl font-semibold mb-4 text-purple-300">Project Alpha Progress</h2>
      <div class="w-full bg-gray-700 rounded-full h-4 mb-2">
        <div class="bg-gradient-to-r from-purple-500 to-indigo-500 h-4 rounded-full" style="width: 75%;"></div>
      </div>
      <p class="text-sm text-gray-400">75% Complete - Next deadline in 5 days</p>
    </div>

    <!-- Progress Bar 2 -->
    <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
      <h2 class="text-2xl font-semibold mb-4 text-blue-300">Task Beta Completion</h2>
      <div class="w-full bg-gray-700 rounded-full h-4 mb-2">
        <div class="bg-gradient-to-r from-blue-500 to-cyan-500 h-4 rounded-full" style="width: 90%;"></div>
      </div>
      <p class="text-sm text-gray-400">90% Done - Awaiting final review</p>
    </div>

    <!-- Circular Progress -->
    <div class="bg-gray-800 p-6 rounded-lg shadow-lg flex flex-col items-center">
      <h2 class="text-2xl font-semibold mb-4 text-green-300">Server Load</h2>
      <div class="relative w-24 h-24 mb-2">
        <svg class="w-full h-full transform -rotate-90" viewBox="0 0 100 100">
          <circle class="text-gray-700 stroke-current" stroke-width="10" cx="50" cy="50" r="40" fill="transparent"></circle>
          <circle class="text-green-500 stroke-current progress-ring__circle" stroke-width="10" stroke-linecap="round" cx="50" cy="50" r="40" fill="transparent" stroke-dasharray="251.2" stroke-dashoffset="62.8"></circle>
        </svg>
        <span class="absolute inset-0 flex items-center justify-center text-xl font-bold text-green-400">75%</span>
      </div>
      <p class="text-sm text-gray-400">Current CPU Usage</p>
    </div>

    <!-- Activity Feed -->
    <div class="bg-gray-800 p-6 rounded-lg shadow-lg col-span-1 md:col-span-2 lg:col-span-1">
      <h2 class="text-2xl font-semibold mb-4 text-orange-300">Recent Activity</h2>
      <ul class="space-y-4">
        <li class="flex items-center space-x-3">
          <div class="flex-shrink-0 w-3 h-3 rounded-full bg-orange-500"></div>
          <p class="text-gray-300"><span class="font-medium">John Doe</span> updated project status <span class="text-orange-400">"In Progress"</span></p>
        </li>
        <li class="flex items-center space-x-3">
          <div class="flex-shrink-0 w-3 h-3 rounded-full bg-orange-500"></div>
          <p class="text-gray-300"><span class="font-medium">Jane Smith</span> completed <span class="text-orange-400">"Design Mockups"</span> task</p>
        </li>
        <li class="flex items-center space-x-3">
          <div class="flex-shrink-0 w-3 h-3 rounded-full bg-orange-500"></div>
          <p class="text-gray-300"><span class="font-medium">Team Lead</span> reviewed <span class="text-orange-400">" sprint 2 tasks"</span></p>
        </li>
      </ul>
    </div>

    <!-- Key Performance Indicators (KPIs) -->
    <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
      <h2 class="text-2xl font-semibold mb-4 text-teal-300">Key Performance Indicators</h2>
      <div class="space-y-4">
        <div class="flex justify-between items-center">
          <span class="text-gray-300">Conversion Rate:</span>
          <span class="text-teal-400 font-bold">4.5%</span>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-gray-300">Bounce Rate:</span>
          <span class="text-red-400 font-bold">55%</span>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-gray-300">Avg. Session Duration:</span>
          <span class="text-teal-400 font-bold">3:45 min</span>
        </div>
      </div>
    </div>

    <!-- Donut Chart Placeholder (Conceptual, requires JS for actual functionality) -->
    <div class="bg-gray-800 p-6 rounded-lg shadow-lg flex flex-col items-center justify-center">
      <h2 class="text-2xl font-semibold mb-4 text-pink-300">Project Distribution</h2>
      <div class="relative w-32 h-32">
        <div class="absolute inset-0 rounded-full bg-pink-500 opacity-70" style="clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);"></div>
        <div class="absolute inset-0 rounded-full bg-purple-500 opacity-70" style="clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%);"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <div class="w-20 h-20 rounded-full bg-gray-800"></div>
        </div>
      </div>
      <p class="text-sm text-gray-400 mt-2">Marketing (50%), Development (50%)</p>
    </div>

  </div>

  <!-- Footer or additional dashboard elements -->
  <div class="mt-8 text-center text-gray-600">
    <p>&copy; 2023 Dashboard Analytics. All rights reserved.</p>
  </div>

</div>

관련 구성 요소

Progress Indicators 구성 요소

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

열다

Progress Indicators 구성 요소

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

열다

Memphis_Weather_Progress_Indicator

멤피스 디자인 스타일의 날씨 진행 표시기 구성 요소로, 기후 데이터를 표시하는 데 적합한 밝은 액센트 색상의 대담한 흑백을 특징으로 합니다. 반응형 디자인과 다크 모드 지원이 포함됩니다.

열다