구성 요소 진행률 표시줄 스큐어모픽 프로그레스 바

스큐어모픽 프로그레스 바

포트폴리오를 위한 스큐어모픽 프로그레스 바 구성 요소로, 단색 색 구성표와 Tailwind CSS를 사용하여 반응형 및 다크 모드를 지원하는 복잡한 인터랙티브 디자인을 특징으로 합니다.

미리 보기

HTML 코드

<div class="p-8 bg-gray-200 dark:bg-gray-800 min-h-screen flex items-center justify-center">
  <div class="w-full max-w-md bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-900 p-6 rounded-xl shadow-2xl-inner relative">
    <div class="absolute inset-0 border-4 border-gray-400 dark:border-gray-600 rounded-xl pointer-events-none"></div>
    <div class="text-center mb-6">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-md">Project Progress</h2>
      <p class="text-gray-600 dark:text-gray-300 text-sm">Portfolio Showcase</p>
    </div>

    <div class="mb-8 relative">
      <div class="h-8 bg-gray-400 dark:bg-gray-600 rounded-full shadow-inner-lg overflow-hidden relative">
        <div class="absolute inset-y-0 left-0 w-3/4 bg-gradient-to-r from-blue-400 to-blue-600 dark:from-blue-600 dark:to-blue-800 rounded-full shadow-lg transition-all duration-500 ease-out flex items-center justify-end pr-3"
             style="width: 75%;">
          <span class="text-white text-sm font-bold drop-shadow-md">75%</span>
        </div>
        <div class="absolute top-1/2 left-3/4 -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-white dark:bg-gray-200 rounded-full shadow-md border-2 border-blue-500 dark:border-blue-700"></div>
      </div>
      <div class="text-gray-700 dark:text-gray-300 text-right mt-2 text-sm">Completed</div>
    </div>

    <div class="grid grid-cols-2 gap-4 text-sm">
      <div class="flex items-center space-x-2">
        <div class="w-4 h-4 rounded-full bg-blue-500 dark:bg-blue-700 shadow-md transform -rotate-12"></div>
        <span class="text-gray-700 dark:text-gray-300">Design Phase</span>
      </div>
      <div class="flex items-center space-x-2 justify-end">
        <span class="text-gray-700 dark:text-gray-300">90%</span>
        <div class="w-4 h-4 rounded-full bg-blue-400 dark:bg-blue-600 shadow-md transform rotate-12"></div>
      </div>

      <div class="flex items-center space-x-2">
        <div class="w-4 h-4 rounded-full bg-blue-500 dark:bg-blue-700 shadow-md transform -rotate-12"></div>
        <span class="text-gray-700 dark:text-gray-300">Development</span>
      </div>
      <div class="flex items-center space-x-2 justify-end">
        <span class="text-gray-700 dark:text-gray-300">70%</span>
        <div class="w-4 h-4 rounded-full bg-blue-400 dark:bg-blue-600 shadow-md transform rotate-12"></div>
      </div>

      <div class="flex items-center space-x-2">
        <div class="w-4 h-4 rounded-full bg-blue-500 dark:bg-blue-700 shadow-md transform -rotate-12"></div>
        <span class="text-gray-700 dark:text-gray-300">Testing</span>
      </div>
      <div class="flex items-center space-x-2 justify-end">
        <span class="text-gray-700 dark:text-gray-300">50%</span>
        <div class="w-4 h-4 rounded-full bg-blue-400 dark:bg-blue-600 shadow-md transform rotate-12"></div>
      </div>
    </div>

    <div class="mt-8 text-center">
      <button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white font-bold py-2 px-6 rounded-full 
                     shadow-lg hover:shadow-xl active:shadow-inner-lg transition-all duration-200
                     dark:bg-blue-700 dark:hover:bg-blue-800 dark:active:bg-blue-900">
        View Details
      </button>
    </div>
  </div>
</div>

<style>
  /* Custom Utility Classes for Skeuomorphism */
  .shadow-2xl-inner {
    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.2), inset -5px -5px 10px rgba(255, 255, 255, 0.5);
  }
  .dark .shadow-2xl-inner {
    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5), inset -5px -5px 10px rgba(255, 255, 255, 0.1);
  }

  .shadow-inner-lg {
    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.2), inset -3px -3px 6px rgba(255, 255, 255, 0.5);
  }
  .dark .shadow-inner-lg {
    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.4), inset -3px -3px 6px rgba(255, 255, 255, 0.1);
  }

  .drop-shadow-md {
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
  }
</style>

관련 구성 요소

Progress Bar 구성 요소

3D 요소로 디자인된 반응형 진행률 표시줄 구성 요소로, 전자 상거래에 적합한 유사한 색 구성표를 사용하며 다크 모드를 지원합니다.

열다

트라이어딕 다크 모드 프로그레스 바

다크 모드를 위한 단순하고 삼각형 색상의 진행률 표시줄 구성 요소로, 블로그 및 콘텐츠 소비에 적합합니다. Tailwind CSS를 사용한 반응형 디자인이 특징이며, JavaScript 없이 어두운 테마 지원을 위해 dark: 접두사를 사용합니다.

열다

머티리얼 디자인 흙빛 진행률 표시줄

머티리얼 디자인에서 영감을 받은 어스 톤의 진행률 표시줄로, 소셜 미디어 인터페이스에 적합합니다. 반응형이며 Tailwind CSS를 사용하는 다크 모드 지원이 포함됩니다.

열다