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

1. HTML и CSS. Вы можете использовать HTML и CSS для создания базового индикатора выполнения, а затем динамически обновлять ширину, используя встроенные стили или классы CSS. Вы можете вычислить процент и соответствующим образом обновить ширину.

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

2. Bootstrap Framework: если вы уже используете платформу Bootstrap, вы можете использовать ее встроенный компонент индикатора выполнения. Вы можете динамически устанавливать ширину индикатора выполнения в зависимости от процентного значения.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>

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

<div class="progress">
  <div id="progress-bar" class="progress-bar">0%</div>
</div>
<script>
  // Example JavaScript code to update the progress bar
  var progressBar = document.getElementById('progress-bar');
  var percentage = 50; // Example percentage value
  progressBar.style.width = percentage + '%';
  progressBar.textContent = percentage + '%';
</script>

Это всего лишь несколько способов создания индикатора выполнения начальной загрузки с процентами. Вы можете дополнительно настроить эти примеры в соответствии со своими потребностями.