я хочу использовать bootstrap анимированные полосы, чтобы показать, когда страница загружает% и когда завершена, а не на основе секунд

Question

Это Html:

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>

Использование JQuery Я пытаюсь достичь

1: страница загружается и показывает в реальном времени%

2: индикатор выполнения должен отображать загрузку страницы, а не заранее заданные секунды

3: при открытии 100% и открытии страницы он становится зеленым, а не синим

Мне нужна помощь в определении того, с чего начать.