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

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

Отзывчивый компонент индикатора выполнения, разработанный с учетом темного режима, с использованием Tailwind CSS.

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

HTML-код

<div class="flex items-center justify-center h-screen bg-gray-900">
  <div class="w-full max-w-md">
    <h2 class="text-white text-lg font-semibold mb-4">Progress Bar</h2>
    <div class="relative pt-1">
      <div class="flex items-center justify-between mb-2">
        <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200">
          70%
        </span>
        <span class="text-xs font-semibold inline-block text-gray-400">
          7/10
        </span>
      </div>
      <div class="h-2 bg-gray-700 rounded">
        <div class="h-full bg-teal-500 rounded" style="width: 70%;"></div>
      </div>
    </div>
    <p class="text-gray-400 text-sm mt-2">Loading...</p>
  </div>
</div>

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

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

Отзывчивый компонент полосы прогресса, разработанный для темного режима с использованием Tailwind CSS, подходит для современных веб-приложений.

Открытый

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

Индикатор выполнения в стиле стекломорфизма, разработанный для интерфейсов социальных сетей, отличается яркими цветами и поддержкой темного режима. Простая верстка без JavaScript.

Открытый

Luxury_Grayscale_Social_Media_Progress_Bar

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

Открытый