검색 구성 요소

카테고리

구성 요소 진행 표시기

진행 표시기

진행 중인 프로세스의 시각적 지표

Progress Indicators 구성 요소

유리 형태 효과로 설계된 간단한 진행률 표시기로, 다크 모드를 지원하고 단색 색 구성표가 있는 전자 상거래 웹 사이트에 적합합니다.

                <div class="flex flex-col items-center justify-center p-5 bg-white bg-opacity-30 backdrop-blur-sm dark:bg-gray-800 dark:bg-opacity-30 rounded-lg">
    <h1 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Order Progress</h1>
    <div class="w-full mx-auto">
        <!-- Progress Bar -->
        <div class="relative pt-1">
            <div class="flex mb-2 items-center justify-between">
                <div class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-800 dark:text-white bg-blue-200 dark:bg-blue-600">
                    1. Add to Cart
                </div>
                <div class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-800 dark:text-white bg-blue-200 dark:bg-blue-600">
                    2. Checkout
                </div>
                <div class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-gray-800 dark:text-white bg-blue-200 dark:bg-blue-600">
                    3. Payment
                </div>
            </div>
            <div class="flex h-2 mb-4 rounded bg-gray-300 dark:bg-gray-600">
                <div class="w-1/3 h-full bg-blue-600 dark:bg-blue-300"></div>
            </div>
        </div>
    </div>
    <div class="mt-4">
        <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full">
    </div>
    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Estimated delivery: 3-5 business days</p>
</div>

Progress Indicators 구성 요소

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

열다 미리 보기

                <div class="max-w-4xl mx-auto p-8">
  <h2 class="text-2xl font-bold text-center mb-6">Portfolio Progress Indicators</h2>
  <div class="space-y-8">
    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-5 shadow-lg">
      <div class="flex items-center justify-between mb-2">
        <span class="text-lg font-semibold text-blue-600 dark:text-blue-400">Project 1</span>
        <span class="text-sm font-medium text-gray-600 dark:text-gray-400">70%</span>
      </div>
      <div class="relative w-full h-4 bg-gray-300 dark:bg-gray-700 rounded-full">
        <div class="absolute h-4 bg-blue-600 dark:bg-blue-400 rounded-full" style="width: 70%;"></div>
      </div>
    </div>
    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-5 shadow-lg">
      <div class="flex items-center justify-between mb-2">
        <span class="text-lg font-semibold text-red-600 dark:text-red-400">Project 2</span>
        <span class="text-sm font-medium text-gray-600 dark:text-gray-400">45%</span>
      </div>
      <div class="relative w-full h-4 bg-gray-300 dark:bg-gray-700 rounded-full">
        <div class="absolute h-4 bg-red-600 dark:bg-red-400 rounded-full" style="width: 45%;"></div>
      </div>
    </div>
    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-5 shadow-lg">
      <div class="flex items-center justify-between mb-2">
        <span class="text-lg font-semibold text-green-600 dark:text-green-400">Project 3</span>
        <span class="text-sm font-medium text-gray-600 dark:text-gray-400">90%</span>
      </div>
      <div class="relative w-full h-4 bg-gray-300 dark:bg-gray-700 rounded-full">
        <div class="absolute h-4 bg-green-600 dark:bg-green-400 rounded-full" style="width: 90%;"></div>
      </div>
    </div>
    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-5 shadow-lg">
      <div class="flex items-center justify-between mb-2">
        <span class="text-lg font-semibold text-yellow-600 dark:text-yellow-400">Project 4</span>
        <span class="text-sm font-medium text-gray-600 dark:text-gray-400">60%</span>
      </div>
      <div class="relative w-full h-4 bg-gray-300 dark:bg-gray-700 rounded-full">
        <div class="absolute h-4 bg-yellow-600 dark:bg-yellow-400 rounded-full" style="width: 60%;"></div>
      </div>
    </div>
  </div>
</div>

Progress Indicators 구성 요소

80년대와 90년대의 레트로/빈티지 미학에서 영감을 받은 간단한 Progress Indicators 구성 요소로, 보색체를 사용합니다. 소셜 미디어 인터페이스용으로 설계되었으며 어두운 테마 지원으로 반응합니다.

열다 미리 보기

                <div class="flex flex-col items-center justify-center p-6 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-white mb-4">Progress Indicators</h2>
    <div class="w-full bg-gray-700 dark:bg-gray-600 rounded-lg">
        <div class="bg-blue-500 dark:bg-blue-400 h-4 rounded-lg" style="width: 70%;"></div>
    </div>
    <div class="flex justify-between w-full text-sm mt-2 text-gray-300 dark:text-gray-200">
        <span>0%</span>
        <span>70%</span>
    </div>
    <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-blue-500">
        <div class="ml-3">
            <p class="text-md text-white">User Name</p>
            <p class="text-sm text-gray-400 dark:text-gray-500">Status: Active</p>
        </div>
    </div>
    <p class="text-gray-500 dark:text-gray-400 mt-2 text-center">Loading data...</p>
    <img src="https://picsum.photos/200/100?random=1" alt="Random Image" class="mt-4 rounded-lg shadow-md">
</div>

Progress Indicators 구성 요소

소셜 미디어 인터페이스에 적합한 뉴모픽 스타일의 진행률 표시기로, 다크 모드를 지원하는 간단한 레이아웃과 반응형 디자인이 특징입니다.

열다 미리 보기

                <div class="flex flex-col items-center justify-center p-6">
  <div class="w-full max-w-xs p-4 bg-gray-200 rounded-lg shadow-lg dark:bg-gray-800 dark:shadow-md">
    <h3 class="text-center text-lg font-semibold text-gray-800 dark:text-gray-200">Profile Completion</h3>
    <div class="my-4">
      <div class="flex justify-between">
        <span class="text-sm text-gray-600 dark:text-gray-400">0%</span>
        <span class="text-sm text-gray-600 dark:text-gray-400">100%</span>
      </div>
      <div class="h-2 bg-gray-300 rounded-lg dark:bg-gray-700">
        <div class="h-full bg-gradient-to-r from-green-400 to-blue-500 rounded-lg" style="width: 70%;"></div>
      </div>
    </div>
    <div class="flex items-center justify-between">
      <img src="https://picsum.photos/40" alt="User Avatar" class="rounded-full border-2 border-gray-300 dark:border-gray-600" />
      <span class="text-sm text-gray-800 dark:text-gray-200">User Name</span>
    </div>
  </div>
</div>

Progress Indicators 구성 요소

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

열다 미리 보기

                <div class="flex flex-col items-center justify-center p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Progress Indicators</h2>
    <div class="relative w-full max-w-md">
        <div class="flex items-center justify-between mb-2">
            <span class="text-gray-600 dark:text-gray-400">Step 1</span>
            <span class="text-gray-600 dark:text-gray-400">20%</span>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-full h-4">
            <div class="bg-gray-800 dark:bg-gray-300 h-4 rounded-full" style="width: 20%;"></div>
        </div>
    </div>
    <div class="relative w-full max-w-md mt-4">
        <div class="flex items-center justify-between mb-2">
            <span class="text-gray-600 dark:text-gray-400">Step 2</span>
            <span class="text-gray-600 dark:text-gray-400">50%</span>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-full h-4">
            <div class="bg-gray-800 dark:bg-gray-300 h-4 rounded-full" style="width: 50%;"></div>
        </div>
    </div>
    <div class="relative w-full max-w-md mt-4">
        <div class="flex items-center justify-between mb-2">
            <span class="text-gray-600 dark:text-gray-400">Step 3</span>
            <span class="text-gray-600 dark:text-gray-400">80%</span>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-full h-4">
            <div class="bg-gray-800 dark:bg-gray-300 h-4 rounded-full" style="width: 80%;"></div>
        </div>
    </div>
    <div class="relative w-full max-w-md mt-4">
        <div class="flex items-center justify-between mb-2">
            <span class="text-gray-600 dark:text-gray-400">Step 4</span>
            <span class="text-gray-600 dark:text-gray-400">100%</span>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-full h-4">
            <div class="bg-gray-800 dark:bg-gray-300 h-4 rounded-full" style="width: 100%;"></div>
        </div>
    </div>
    <div class="mt-6">
        <img src="https://picsum.photos/200/100?random=1" alt="Content Image" class="rounded-md shadow-md">
    </div>
    <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-500 dark:border-gray-300"> 
        <span class="ml-2 text-gray-800 dark:text-white">Author Name</span>
    </div>
</div>

Glassmorphism Progress Indicators 구성 요소

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

열다 미리 보기

                <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>

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

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

열다 미리 보기

                <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 구성 요소

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

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen p-6 bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl p-6 shadow-lg">
    <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Progress</h2>
    
    <div class="mb-4">
      <div class="flex justify-between items-center mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Task Completion</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">75%</span>
      </div>
      <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
        <div class="bg-blue-600 h-2.5 rounded-full" style="width: 75%"></div>
      </div>
    </div>

    <div class="mb-4">
      <div class="flex justify-between items-center mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Resource Usage</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">50%</span>
      </div>
      <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
        <div class="bg-green-600 h-2.5 rounded-full" style="width: 50%"></div>
      </div>
    </div>

    <div>
      <div class="flex justify-between items-center mb-1">
        <span class="text-base font-medium text-gray-700 dark:text-gray-300">Download Progress</span>
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">90%</span>
      </div>
      <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
        <div class="bg-yellow-400 h-2.5 rounded-full" style="width: 90%"></div>
      </div>
    </div>

  </div>
</div>

Progress Indicators 구성 요소

반응형 효과와 어두운 테마를 지원하는 Tailwind CSS를 사용하는 레트로/빈티지 스타일의 진행 표시기 구성 요소입니다.

열다 미리 보기

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
    <h1 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-200 mb-6">
        Retro Progress Indicators
    </h1>
    <div class="w-full max-w-lg">
        <!-- Progress Bar -->
        <div class="mb-6">
            <div class="relative pt-1">
                <div class="flex mb-2 items-center justify-between">
                    <div class="text-sm font-medium text-gray-600 dark:text-gray-300">Loading...</div>
                    <div class="text-sm font-medium text-gray-600 dark:text-gray-300">80%</div>
                </div>
                <div class="flex h-2 mb-4 bg-gray-200 rounded dark:bg-gray-700">
                    <div class="bg-yellow-500 h-full rounded" style="width: 80%"></div>
                </div>
            </div>
        </div>
        <!-- Circular Progress Indicator -->
        <div class="flex items-center justify-center mb-6">
            <div class="relative w-24 h-24">
                <img src="https://picsum.photos/seed/circularprogress/300/300" class="rounded-full shadow-lg" alt="Circular Progress" /> 
                <div class="absolute inset-0 flex items-center justify-center text-xl font-bold text-yellow-500">
                    80%
                </div>
            </div>
        </div>
        <!-- Step Indicators -->
        <div class="flex justify-between w-full text-center">
            <div>
                <div class="w-4 h-4 bg-yellow-500 rounded-full mx-auto mb-2"></div>
                <div class="text-sm font-medium text-gray-600 dark:text-gray-300">Step 1</div>
            </div>
            <div>
                <div class="w-4 h-4 bg-gray-300 rounded-full mx-auto mb-2 dark:bg-gray-600"></div>
                <div class="text-sm font-medium text-gray-600 dark:text-gray-300">Step 2</div>
            </div>
            <div>
                <div class="w-4 h-4 bg-gray-300 rounded-full mx-auto mb-2 dark:bg-gray-600"></div>
                <div class="text-sm font-medium text-gray-600 dark:text-gray-300">Step 3</div>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" class="rounded-full w-16 h-16" alt="User Avatar" />
        <div class="text-center mt-2 text-sm text-gray-600 dark:text-gray-300">John Doe</div>
    </div>
</div>

Progress Indicators 구성 요소

이것은 반응형 효과와 어두운 테마를 지원하는 Tailwind CSS를 사용하는 Material Design 스타일의 진행률 표시기 구성 요소입니다.

열다 미리 보기

                <div class="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-800 p-4">

  <!-- Linear Progress Bar -->
  <div class="w-64 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden shadow-md">
    <div class="h-full bg-blue-500 dark:bg-blue-400 w-3/4 rounded-full animate-pulse"></div>
  </div>

  <!-- Spacer -->
  <div class="my-8"></div>

  <!-- Circular Progress Indicator -->
  <div class="relative">
    <div class="w-16 h-16 border-4 border-blue-500 dark:border-blue-400 border-t-transparent border-solid rounded-full animate-spin shadow-md"></div>
    <div class="absolute top-0 left-0 w-16 h-16 flex items-center justify-center text-blue-700 dark:text-blue-300 font-bold">
      75%
    </div>
  </div>

  <!-- Spacer -->
  <div class="my-8"></div>

  <!-- Linear Progress Bar with Label -->
  <div class="w-64">
    <div class="flex justify-between mb-1 text-gray-700 dark:text-gray-300">
      <span class="text-base font-medium">Progress</span>
      <span class="text-sm font-medium">45%</span>
    </div>
    <div class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden shadow-md">
      <div class="h-full bg-green-500 dark:bg-green-400 w-[45%] rounded-full" style="width: 45%;"></div>
    </div>
  </div>

</div>