진행률 표시줄

트라이어딕 다크 모드 프로그레스 바

다크 모드를 위한 단순하고 삼각형 색상의 진행률 표시줄 구성 요소로, 블로그 및 콘텐츠 소비에 적합합니다. Tailwind CSS를 사용한 반응형 디자인이 특징이며, JavaScript 없이 어두운 테마 지원을 위해 dark: 접두사를 사용합니다.

미리보기 열기

                <div class="dark:bg-gray-900 p-4">
  <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Reading Progress</h2>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-4">
    <div class="dark:bg-purple-500 h-2.5 rounded-full" style="width: 45%;"></div>
  </div>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-4">
    <div class="dark:bg-yellow-500 h-2.5 rounded-full" style="width: 60%;"></div>
  </div>
  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
    <div class="dark:bg-emerald-500 h-2.5 rounded-full" style="width: 75%;"></div>
  </div>
</div>

Progress Bar 구성 요소

머티리얼 디자인 스타일로 디자인된 반응형 진행률 표시줄 구성 요소로, 포트폴리오 쇼케이스를 위한 파스텔 색 구성표를 통합합니다. 다크 모드를 지원합니다.

미리보기 열기

                <div class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-xl font-semibold mb-2 text-gray-700 dark:text-gray-200">Project Progress</h2>
    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full">
        <div class="bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400 h-4 rounded-full" style="width: 70%;"></div>
    </div>
    <div class="flex justify-between w-full mt-2 text-xs text-gray-600 dark:text-gray-400">
        <span>0%</span>
        <span>70%</span>
        <span>100%</span>
    </div>
    <div class="mt-4">
        <img src="https://picsum.photos/100/100" alt="Project Screenshot" class="rounded-lg shadow-md"> 
    </div>
    <div class="mt-2 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md mr-2">
        <span class="text-gray-700 dark:text-gray-200">Reviewed by John Doe</span>
    </div>
</div>

뉴모피즘 프로그레스 바

포트폴리오를 위한 뉴모피즘(Neumorphism) 스타일의 진행 표시줄은 파스텔 색상 구성표, 적당한 복잡성, 응답성 및 어두운 테마 지원을 특징으로 합니다. JavaScript는 포함되어 있지 않습니다. 구성 요소는 HTML 및 Tailwind CSS로 빌드됩니다.

미리보기 열기

                <div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-800 p-4">
  <div class="w-full max-w-md bg-gray-200 dark:bg-gray-700 rounded-full shadow-inner dark:shadow-inner-dark overflow-hidden">
    <div class="bg-purple-400 text-xs leading-none py-1 text-center text-white rounded-full shadow-neumo-progress dark:shadow-neumo-progress-dark" style="width: 75%"> 75% </div>
  </div>
  <div class="mt-8 text-gray-700 dark:text-gray-300">
    Skill Progress
  </div>
</div>

<style>
.shadow-inner {
  box-shadow: inset 5px 5px 10px #b0b0b0,
              inset -5px -5px 10px #f0f0f0;
}

.dark .shadow-inner-dark {
  box-shadow: inset 5px 5px 10px #4a4a4a,
              inset -5px -5px 10px #363636;
}

.shadow-neumo-progress {
  box-shadow: 5px 5px 10px #a78bfa,
              -5px -5px 10px #c084fc;
}

.dark .shadow-neumo-progress-dark {
  box-shadow: 5px 5px 10px #6d28d9,
              -5px -5px 10px #7c3aed;
}
</style>

미니멀리스트 프로그레스 바

파스텔 색상의 미니멀하고 평평한 디자인의 진행률 표시줄 구성 요소로 전문 비즈니스 또는 기업 웹사이트에 적합합니다. 반응형 디자인이며 Tailwind CSS를 사용하여 다크 모드를 지원합니다.

미리보기 열기

                <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
  <div class="bg-blue-400 h-2.5 rounded-full" style="width: 45%"></div>
</div>

Progress Bar 구성 요소

3D 요소로 디자인된 반응형 진행률 표시줄 구성 요소로, 전자 상거래에 적합한 유사한 색 구성표를 사용하며 다크 모드를 지원합니다.

미리보기 열기

                <div class="max-w-md mx-auto p-4">
    <div class="relative h-8 bg-gray-300 rounded-md overflow-hidden dark:bg-gray-700">
        <div class="absolute inset-0 transition-all duration-300 ease-out bg-gradient-to-r from-green-400 to-blue-400 dark:from-green-600 dark:to-blue-600" style="width: 70%;"></div>
        <div class="absolute inset-0 flex items-center justify-center text-white font-semibold">
            70%
        </div>
    </div>
    <div class="mt-4 text-gray-700 dark:text-gray-300">
        <p class="text-sm">Progress towards your shopping goals.</p>
    </div>
</div>

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

소셜 네트워킹 인터페이스용으로 설계된 반응형 진행률 표시줄 구성 요소로, Tailwind CSS를 사용하여 구축된 3D 효과, 단색 색 구성표 및 다크 모드 지원을 특징으로 합니다.

미리보기 열기

                <div class="flex flex-col items-center py-10">
    <div class="w-full max-w-md">
        <div class="flex justify-between mb-2">
            <span class="text-gray-700 dark:text-gray-300">Progress</span>
            <span class="text-gray-700 dark:text-gray-300">75%</span>
        </div>
        <div class="relative bg-gray-200 dark:bg-gray-700 rounded-full h-4">
            <div class="absolute bg-blue-600 dark:bg-blue-300 h-full rounded-full transition-all duration-300 ease-in-out" style="width: 75%; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2), 0px 0px 15px rgba(0, 0, 0, 0.2);"></div>
        </div>
    </div>
    <div class="flex justify-center mt-4">
        <img src="https://picsum.photos/50/50" alt="Progress Image" class="rounded-full border border-gray-300 dark:border-gray-600 shadow-md">
    </div>
    <div class="mt-2 text-gray-500 dark:text-gray-400 text-sm">Some description about the progress being tracked.</div>
</div>

뉴모피즘 프로그레스 바

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

미리보기 열기

                <div class="max-w-md mx-auto mt-10 p-5 bg-gray-100 dark:bg-gray-800 rounded-xl shadow-md">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3">Progress Bar</h2>
    <div class="relative pt-1">
        <div class="flex justify-between mb-1">
            <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200 dark:bg-teal-600 dark:text-teal-200">Task 1</span>
            <span class="text-xs font-semibold text-gray-600 dark:text-gray-400">70%</span>
        </div>
        <div class="flex items-center h-2 bg-gray-300 dark:bg-gray-600 rounded-full">
            <div class="h-full bg-teal-400 rounded-full transition-all duration-300 w-7/12"></div>
        </div>
    </div>
    <div class="relative pt-1">
        <div class="flex justify-between mb-1">
            <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-purple-600 bg-purple-200 dark:bg-purple-600 dark:text-purple-200">Task 2</span>
            <span class="text-xs font-semibold text-gray-600 dark:text-gray-400">40%</span>
        </div>
        <div class="flex items-center h-2 bg-gray-300 dark:bg-gray-600 rounded-full">
            <div class="h-full bg-purple-400 rounded-full transition-all duration-300 w-5/12"></div>
        </div>
    </div>
    <div class="relative pt-1">
        <div class="flex justify-between mb-1">
            <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blue-600 bg-blue-200 dark:bg-blue-600 dark:text-blue-200">Task 3</span>
            <span class="text-xs font-semibold text-gray-600 dark:text-gray-400">90%</span>
        </div>
        <div class="flex items-center h-2 bg-gray-300 dark:bg-gray-600 rounded-full">
            <div class="h-full bg-blue-400 rounded-full transition-all duration-300 w-11/12"></div>
        </div>
    </div>
</div>

Progress Bar 구성 요소

전자 상거래 애플리케이션을 위한 회색조 색 구성표가 있는 브루탈리즘 디자인 스타일의 간단한 진행률 표시줄 구성 요소입니다. 반응형이며 다크 모드를 지원합니다.

미리보기 열기

                <div class="w-full max-w-md mx-auto p-4">
    <h2 class="text-white text-xl font-bold mb-2">Loading Your Items...</h2>
    <div class="bg-gray-300 dark:bg-gray-700 rounded-full h-6">
        <div class="bg-black dark:bg-white h-6 rounded-full" style="width: 70%;"></div>
    </div>
    <div class="flex justify-between mt-2">
        <span class="text-gray-500 dark:text-gray-300 text-sm">0%</span>
        <span class="text-gray-500 dark:text-gray-300 text-sm">70%</span>
    </div>
</div>

머티리얼 디자인 흙빛 진행률 표시줄

머티리얼 디자인에서 영감을 받은 어스 톤의 진행률 표시줄로, 소셜 미디어 인터페이스에 적합합니다. 반응형이며 Tailwind CSS를 사용하는 다크 모드 지원이 포함됩니다.

미리보기 열기

                <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
  <div class="bg-green-700 h-2.5 rounded-full dark:bg-green-500" style="width: 45%"></div>
</div>

Progress Bar 구성 요소

glassmorphism 및 단색 색상으로 스타일링된 간단한 진행률 표시줄 구성 요소로, 비즈니스 및 기업 웹 사이트에 적합하며 다크 모드를 지원합니다.

미리보기 열기

                <div class="flex flex-col items-center justify-center h-screen bg-gray-900 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-700 bg-opacity-30 backdrop-blur-md border border-gray-500 rounded-lg p-6 shadow-lg w-1/2">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Progress</h2>
        <div class="relative w-full h-4 rounded-full bg-gray-300 dark:bg-gray-600">
            <div class="absolute top-0 left-0 h-4 rounded-full bg-blue-500" style="width: 70%;"></div>
        </div>
        <span class="text-base text-gray-800 dark:text-gray-200 mt-2">70%</span>
    </div>
</div>

카테고리