Как отобразить загрузку страницы на веб-странице

Бывают случаи, когда что-то загружается, и пользователю приходится ждать. Часто это вообще не показывается пользователю. Обычно, когда десктопное приложение занято, у пользователя появляется небольшое сообщение об этом — ожидающий курсор:

Не существует определенного атрибута window.isLoading. Таким образом, мы можем определить его самостоятельно:

window.isLoading = true;
window.addEventListener('load', (event) => {
  window.isLoading = false;
});

Чтобы показать это пользователю, мы можем использовать ожидающий курсор на веб-странице:

// CSS
body.loading, body.loading * {
   cursor: progress !important;
}
// JS
window.setLoadingFlag = function () {
  window.isLoading = true;
  document.body.className += ' loading';
};
window.removeLoadingFlag = function () {
  window.isLoading = false
  document.body.className -= ' loading';
};

«body.loading *» — используется для переопределения курсора на кнопках, ссылках и т.д.

Рабочий пример: https://codepen.io/m0ksem/pen/qBBLgqW

Также можно использовать некоторый div с фиксированной позицией, чтобы пользователь не мог взаимодействовать со страницей.

VueJS

Мы можем установить isLoading для хранения vuex и показать компоненты vuejs с «состоянием заполнителя».