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

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

Компонент индикатора выполнения с микровзаимодействиями. Включает в себя адаптивные эффекты и поддержку темной темы с использованием только HTML и CSS (Tailwind CSS).

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

HTML-код

<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
  <div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%; animation: progress-animation 2s infinite;"></div>
</div>

<style>
@keyframes progress-animation {
  0% { width: 0%; }
  100% { width: 45%; }
}

.dark .bg-blue-600 {
  background-color: #90cdf4; /* Lighter blue for dark mode */
}

/* Responsive considerations */
@media (max-width: 768px) {
  @keyframes progress-animation {
    0% { width: 0%; }
    100% { width: 60%; } /* Wider progress on smaller screens */
  }
  .bg-blue-600 {
    animation: progress-animation 2s infinite; /* Apply animation again for clarity */
  }
}
</style>

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

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

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

Открытый

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

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

Открытый

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

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

Открытый