Компоненты Индикатор выполнения Компонент индикатора выполнения

Компонент индикатора выполнения

Отзывчивый компонент индикатора выполнения, выполненный в стиле Material Design, включающий пастельные цветовые схемы для витрин портфолио. Он поддерживает темный режим.

Предварительный просмотр

HTML-код

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

Связанные компоненты

Glassmorphism_EarthTones_ProgressBar_ForumComponent

Отзывчивый компонент индикатора прогресса glassmorphism с земляными тонами, подходящий для форумов или сообществ. Имеет полупрозрачные элементы, похожие на матовое стекло, с эффектами размытия и поддержкой темного режима.

Открытый

Индикатор прогресса Neumorphism

Прогресс-бар в стиле Neumorphism для портфолио с пастельной цветовой гаммой, умеренной сложностью, отзывчивостью и поддержкой темных тем. JavaScript не включен; компонент собран с помощью HTML и Tailwind CSS.

Открытый

Минималистичный треадический индикатор выполнения

Минималистичный, отзывчивый индикатор выполнения с триадической цветовой схемой и поддержкой темных тем, подходящий для приложений для социальных сетей.

Открытый