구성 요소 진행 표시기 Glassmorphism Progress Indicators 구성 요소

Glassmorphism Progress Indicators 구성 요소

Glassmorphism Progress Indicators 생생한 색 구성표와 단순한 복잡성을 가진 구성 요소.

미리 보기

HTML 코드

<div class="flex flex-col items-center justify-center min-h-screen dark:bg-gray-900">
  <div class="dark:bg-gray-800 bg-white bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg dark:backdrop-blur-lg rounded-lg p-6 shadow-xl dark:shadow-xl">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Progress</h2>
    <div class="w-64 h-4 bg-gray-300 rounded-full overflow-hidden dark:bg-gray-700">
      <div class="h-full bg-gradient-to-r from-cyan-400 to-blue-500 dark:from-cyan-600 dark:to-blue-700 w-3/4 rounded-full"></div>
    </div>
    <p class="text-sm text-gray-700 dark:text-gray-300 mt-2">75% Complete</p>
  </div>
</div>

관련 구성 요소

Progress Indicators 구성 요소

블로그 콘텐츠 소비를 위한 회색조 색 구성표가 있는 3D 디자인 스타일 진행률 표시기 구성 요소로, 반응형 디자인 및 다크 모드 지원을 제공합니다.

열다

Progress Indicators 구성 요소

머티리얼 디자인에서 영감을 받은 진행 상태 표시기 구성 요소로, 반응형 효과와 어두운 테마를 지원하며 Tailwind CSS를 사용하여 빌드되었습니다.

열다

Progress Indicators 구성 요소

미니멀한 진행률 표시기 구성 요소는 어두운 테마를 지원하는 생생한 색상과 반응형 디자인을 사용하여 포트폴리오 진행 상황을 보여주도록 설계되었습니다.

열다