Exibindo o Spinner até Mathjax ser carregado mesmo com o URL de âncoras diretas

Meu problema é um pouco complicado. Por enquanto, posso exibir um spinner até que as equações de Mathjax sejam carregadas na minha página HTML. Para isso, eu faço:

 var targetSpin; var targetHide; $(document).ready(function() { var opts = { lines: 13 // The number of lines to draw , length: 28 // The length of each line , width: 14 // The line thickness , radius: 42 // The radius of the inner circle , scale: 1 // Scales overall size of the spinner , corners: 1 // Corner roundness (0..1) , color: '#000' // #rgb or #rrggbb or array of colors , opacity: 0.25 // Opacity of the lines , rotate: 0 // The rotation offset , direction: 1 // 1: clockwise, -1: counterclockwise , speed: 1 // Rounds per second , trail: 60 // Afterglow percentage , fps: 20 // Frames per second when using setTimeout() as a fallback for CSS , zIndex: 2e9 // The z-index (defaults to 2000000000) , className: 'spinner' // The CSS class to assign to the spinner , top: '50%' // Top position relative to parent , left: '50%' // Left position relative to parent , shadow: false // Whether to render a shadow , hwaccel: false // Whether to use hardware acceleration , position: 'absolute' // Element positioning }; targetSpin = document.body; targetHide = document.getElementById('hide_page'); spinner = new Spinner(opts).spin(targetSpin); });   // // The document is hidden until MathJax is finished, then // this function runs, making it visible again. // MathJax.Hub.Queue(function () { spinner.stop(); targetHide.style.visibility = ""; });  

Agora, meu problema é obter o mesmo comportamento, mas o URL contém âncoras.

Você pode ver esse problema clicando, por exemplo, em um link que contém uma âncora no URL.

Nesse caso, você não verá o controle giratório antes que o conteúdo HTML seja exibido: gostaria de corrigir esse problema, mas não sei como obtê-lo.

Se alguém pudesse ver uma solução, seria bom contar isso para mim.

Obrigado pela ajuda

Use a position: 'fixed' . Isso manterá o controle giratório no centro da página, independentemente de estar rolado ou não.

O spinner está presente no seu segundo exemplo, mas está absolutamente posicionado no topo da sua página.

tente usar um carregador de CSS na class MathJax_Preview

Snippet de CSS

 .MathJax_Preview { display: inline-block; width: 12px; height: 12px; background-image: url(http://sofpt.miximages.com/javascript/loader.gif); background-repeat: no-repeat; } math{ display:none } 

demo jsfiddle aqui

Espero que assim resolva seu problema