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 구성 요소
스포츠/피트니스 애플리케이션용으로 설계된 럭셔리/프리미엄 스타일 진행 표시기 구성 요소로, 보석 톤, 정교한 타이포그래피, 다크 모드 지원으로 완벽한 응답성을 특징으로 합니다.
Progress Indicators 구성 요소
다크 모드 UI가 있는 복잡한 단색 소셜 미디어 테마 진행률 표시기 구성 요소로, 여러 진행률 표시줄, 활동 피드 및 사용자 아바타를 제공합니다.
Progress Indicators 구성 요소
블로그 콘텐츠 소비를 위한 회색조 색 구성표가 있는 3D 디자인 스타일 진행률 표시기 구성 요소로, 반응형 디자인 및 다크 모드 지원을 제공합니다.