CCHub Logo CCHub Tailwind Collection
구성 요소 진행률 표시줄 뉴모피즘 프로그레스 바

뉴모피즘 프로그레스 바

포트폴리오를 위한 뉴모피즘(Neumorphism) 스타일의 진행 표시줄은 파스텔 색상 구성표, 적당한 복잡성, 응답성 및 어두운 테마 지원을 특징으로 합니다. JavaScript는 포함되어 있지 않습니다. 구성 요소는 HTML 및 Tailwind CSS로 빌드됩니다.

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-800 p-4">
  <div class="w-full max-w-md bg-gray-200 dark:bg-gray-700 rounded-full shadow-inner dark:shadow-inner-dark overflow-hidden">
    <div class="bg-purple-400 text-xs leading-none py-1 text-center text-white rounded-full shadow-neumo-progress dark:shadow-neumo-progress-dark" style="width: 75%"> 75% </div>
  </div>
  <div class="mt-8 text-gray-700 dark:text-gray-300">
    Skill Progress
  </div>
</div>

<style>
.shadow-inner {
  box-shadow: inset 5px 5px 10px #b0b0b0,
              inset -5px -5px 10px #f0f0f0;
}

.dark .shadow-inner-dark {
  box-shadow: inset 5px 5px 10px #4a4a4a,
              inset -5px -5px 10px #363636;
}

.shadow-neumo-progress {
  box-shadow: 5px 5px 10px #a78bfa,
              -5px -5px 10px #c084fc;
}

.dark .shadow-neumo-progress-dark {
  box-shadow: 5px 5px 10px #6d28d9,
              -5px -5px 10px #7c3aed;
}
</style>

관련 구성 요소

뉴모피즘 프로그레스 바

대시보드용으로 설계된 반응형 뉴모피즘 스타일의 진행률 표시줄 구성 요소로, 대화형 기능을 통합하고 다크 모드를 지원합니다.

열다

Progress Bar 구성 요소

머티리얼 디자인 스타일로 디자인된 반응형 진행률 표시줄 구성 요소로, 포트폴리오 쇼케이스를 위한 파스텔 색 구성표를 통합합니다. 다크 모드를 지원합니다.

열다

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

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

열다