You can run the following code using the javascript console to lock the page into loading mode so you can inspect it:
document.getElementById('header').style.display = 'none';
document.getElementById('content').style.display = 'none';
document.getElementById('flarum-loading').style.display = 'block';
You could use a FontAwesome icon like this:
However note that the CSS and icon fonts might take some time to load, and potentially not being ready before the javascript itself. To guarantee the style is visible, it should be added as a <style> block in the head. Less mixins cannot be used in this case.
#flarum-loading::before {
.fa-icon();
//.fa-spin();
.fa-pulse();
.fas();
content: @fa-var-spinner;
}
This code uses FontAwesome mixins to avoid copy-pasting the CSS. .fa-icon() is the minimum code, .fas(), .far(), .fab() is the choice of icon style (solid, regular, brand), .fa-spin() and .fa-pulse() are the optional animations an content: @fa-var-{icon name} is a shortcut for the unicode values which are all available from within FontAwesome variables.
