Как узнать процент на сколько загрузилась страница и присвоить это значение переменной?
Я бы попробовал так, как только заходят на страницу запускается функция 
setInterval(() => {}, 30);
в которой все время прибавляется к полосе прогресса, например, по пикселю, попутно с этим проверяется document.readyState и если оно будет равно interactive то прогресс переходит заполняется на 2/3. Затем останавливаем интервал и ждем ответа следующей функции.
window.onload = function(){};
как только она сработает, плавно дотягиваем прогресс до конца и закрываем прелоадер.

Можете почитать про события загрузки
На бэке рассчитать вес каждого подключаемого ресурса в gz, передать в data-атрибут (хоть в байтах, хоть в процентах); на фронте обойти все эти ресурсы, рассчитывая общий вес, затем вешать слушателя на onload каждого из них и считать. Переменную можно использовать глобальную, window['awesomeCounter']

Для оптимизации использовать кэш + прописать атрибут заранее, если ресурсы статические