3D 프로그레스 바 컴포넌트

3D 효과, Tailwind CSS, 반응형 디자인 및 다크 모드 지원으로 스타일링되었습니다.

미리 보기

HTML 코드

<div class='relative pt-1 dark:bg-gray-800'>
  <div class='overflow-hidden h-2 text-xs flex rounded bg-gray-200 dark:bg-gray-700'>
    <div style='width: 45%' class='shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500 dark:bg-blue-400'></div>
  </div>
  <div class='mt-2 text-right text-xs dark:text-gray-400'>45% Complete</div>
</div>

관련 구성 요소

Progress Indicators 구성 요소

다크 모드 UI가 있는 복잡한 단색 소셜 미디어 테마 진행률 표시기 구성 요소로, 여러 진행률 표시줄, 활동 피드 및 사용자 아바타를 제공합니다.

열다

Progress Indicators 구성 요소

glassmorphism 스타일, 반응형 디자인 및 어두운 테마를 지원하는 진행률 표시기 구성 요소입니다. 스타일링에 Tailwind CSS를 사용합니다.

열다

Memphis_Weather_Progress_Indicator

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

열다