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

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

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

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

HTML-код

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

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

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

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

Открытый

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

Адаптивный компонент индикатора выполнения в темном режиме для бизнес/корпоративных веб-сайтов, использующий яркие цвета и интерактивные элементы.

Открытый

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

Отзывчивый компонент индикатора выполнения, разработанный с 3D-элементами, с использованием аналогичной цветовой схемы, подходящей для электронной коммерции, с поддержкой темного режима

Открытый