진행률 표시줄

전자 상거래를 위한 다크 모드를 지원하는 반응형 진행률 표시줄 구성 요소로, 생생한 색 구성표와 단순한 레이아웃을 특징으로 합니다.

미리 보기

HTML 코드

<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4 relative overflow-hidden">
  <div class="bg-indigo-600 h-4 rounded-full dark:bg-indigo-400" style="width: 75%;">
    <span class="absolute right-2 top-0 h-full flex items-center text-white text-xs font-bold">75%</span>
  </div>
</div>

관련 구성 요소

뉴모피즘 프로그레스 바

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

열다

스큐어모픽 프로그레스 바

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

열다

Industrial_Travel_Progress_Bar

여행/관광 웹사이트를 위한 간단한 산업 스타일의 진행률 표시줄 구성 요소로, 보라색/보라색 색 구성표와 다크 모드 지원으로 완전한 응답성을 제공합니다.

열다