Как сделать прогрессбар с процентами для получения ответа c json по api?

В консоле infinity если использовать ссылку на api из моего примера https://codepen.io/Ron3485/pen/qBxwWXO?editors=0001

а если заменить ссылку на api из вашего примера, тогда нормально- в конcоле выводится процент загрузки

Почему так происходит?

Написанное про заголовки в моем ответе актуально и для XHR (axios).

24311 / 0 === Infinity

GrayHorse, подскажите пожалуйста еще, а есть ли разница межу вашим вариантом и этим вариантом? Только в том, что здесь используется axios или ест ькакие-то нюансы использования того или другого способа?

Ну axios это отдельная библиотека (враппер над XHR), а fetch уже есть в браузере. Хотя потребуется несколько вспомогательных строк написать/скопировать.

Главное отличие fetch от XHR это возможность работать со стримом.
Например, можно парсить JSON во время загрузки, но не думаю, что тебе это нужно.
XHR позволяется работать с данными лишь после полной их загрузки.
А дизайн axios даже не позволяет прочесть заголовки до полной загрузки ответа.

GrayHorse, спасибо