Дмитрий Дерепко

То есть мне нужно получить echo в момент echo а не когда все сформируется. Как это можно сделать?

В какой момент и что получить?

----------

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

Я, честно говоря, ничего не понял, что вы написали в описании и отвечу на вопрос "Как сделать progress bar для долгого процесса на PHP":

Для упрощения моих примеров, давайте расскажу про процесс доставки еды.
У этого процесса мы сделаем 4 этапа:
1. Отправить заказ и получить подтверждение от провайдера услуги – ресторан, который приготовит нам на вечер роллы и пиццу, да чтобы без сухой корочки.
2. Найти курьера и отправить его в ресторан ждать заказ.
3. Подождать пока ресторан приготовит заказ.
4. Доставить заказ голодному клиенту.

-----

Вам нужно хранилище для логирования этапов выполнения процесса: SQL, NoSQL, файловое или другие хранилища.
Советую выделить несколько свойств у процесса:
1. Этап выполнения. Будем называть его State в дальнейшем.
2. Общий прогресс. Его назовём Total progress.

Дальше можете немного упороться и создать логирование выполнения каждого из этапов. Но уже без меня ;)

После поступления запроса на выполнение вашего сложного процесса вам нужно создать новую запись в хранилище и отдать ID этой записи в ответ на запрос. На фронтенд, в вашем случае.

Следующим этапом вам нужно подключить логирование переходов состояний в места их начала. Код будет примерно таким:

$state->setState("first state");
$storage->save($state);
// Отправить запрос на готовку заказа
// ...
// Ответ положительный

$state->setState("second state");
$storage->save($state);
// Найти курьера
// ...
// Курьер найден

$state->setState("first state");
$storage->save($state);

Этапы логируются, теперь нужно на фротенде показать изменения процесса.
Создаем новый endpoint, который будет:
1. Принимать id процесса, который мы отдали фронту при создании процесса
2. Идти в хранилище и смотреть текущий этап и сколько их всего. В нашем примере их всего 4.
3. Делать нужный вам подсчет. Например, говорить "мы сейчас на 2 из 4 этапов" или 2 делить на 4 и говорить "50% процесса выполнено". Как вам больше понравится, так и делайте.

----------------

Думаю, я неплохо ответил на свой вопрос, да еще и вам накинул идей :)

PHP ничего не знает размерах окна.
JavaScript об этом знает.
Если в конечном варианте появляется div, у которого есть аттрибуты style="height: ...", то JavaScript'ом правьте высоту или ширину на нужном элементе, не придется делать никаких Ajax'ов. А изначально можете рендерить карту со 100% шириной и высотой.

Если так не получится, то делаете ajax запрос на сервер, тот возвращает представление и вы обновляете ваше представление новым.

Сорян, но в Chrome Версия 74.0.3729.169 (Официальная сборка), (64 бит) не работает эта анимация :(
Я так понимаю, вы хотите при наведении закрасить фон и сменить цвет?
Делается это и почти любое другое с анимацией примерно так:

.div{
  background-image: url(...);
  color: black;
  transition: all 0.5s ease-out; # это для работы анимации. можно настроить нужные эфекты, длительность и все остальное
}
.div:hover {
  background-image: url(...); # если хотим сменить картинка при наведении
  color: white; # аналогично верхнему комментарию
  transition
}