Вот несколько способов создания индикатора выполнения HTML с анимацией CSS:

Метод 1: использование анимации ключевых кадров CSS
Вы можете создать анимацию индикатора выполнения, используя ключевые кадры CSS. Вот пример:

HTML:

<div class="progress-bar">
  <div class="progress"></div>
</div>

CSS:

.progress-bar {
  width: 100%;
  background-color: #f0f0f0;
  height: 20px;
}
.progress {
  width: 0%;
  background-color: #4caf50;
  height: 100%;
  animation: progress-animation 5s linear infinite;
}
@keyframes progress-animation {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

Метод 2: использование CSS-переходов.
Вы также можете использовать CSS-переходы для анимации индикатора выполнения. Вот пример:

HTML:

<div class="progress-bar">
  <div class="progress"></div>
</div>

CSS:

.progress-bar {
  width: 100%;
  background-color: #f0f0f0;
  height: 20px;
}
.progress {
  width: 0%;
  background-color: #4caf50;
  height: 100%;
  transition: width 5s;
}
.progress-bar:hover .progress {
  width: 100%;
}

Метод 3: использование JavaScript
Если вам нужен больший контроль над анимацией, вы можете использовать JavaScript для динамического обновления индикатора выполнения. Вот пример:

HTML:

<div class="progress-bar">
  <div class="progress"></div>
</div>

CSS:

.progress-bar {
  width: 100%;
  background-color: #f0f0f0;
  height: 20px;
}
.progress {
  background-color: #4caf50;
  height: 100%;
}

JavaScript:

const progressBar = document.querySelector('.progress');
let progress = 0;
function updateProgressBar() {
  progress += 1;
  progressBar.style.width = `${progress}%`;
  if (progress < 100) {
    requestAnimationFrame(updateProgressBar);
  }
}
updateProgressBar();