Displaying Spinner until Mathjax loaded even with direct anchors URL

Question

My issue is a little bit tricky. For the moment, I get to display a spinner until Mathjax equations are loaded in my HTML page. For this, I do :

<script type="text/javascript">

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);  
});

</script>

<script type="text/x-mathjax-config">
  //
  //  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 = "";
  });
</script>

Now, my issue is to get the same behavior, but for URL which contains anchors.

You can see this problem by clicking for example on a link which contains an anchor into the URL.

In this case, you won't see the spinner before HTML content displays : I would like to fix this issue but I don't know how to acheive it.

If someone could see a solution, that would be nice to tell it to me.

Thanks for your help

score 1 · Accepted Answer · answered Mar 23 '17 at 17:03

1

Use position: 'fixed'. This will keep the spinner in the center of the page, no matter if it is scrolled or not.

The spinner is present on your second example, but it is absolutely positioned at the top of your page.

answered Mar 23 '17 at 17:03

Jeff B

29,943
7
61
90

score 0 · Answer 2 · answered Oct 09 '18 at 14:10

try to use a CSS loader on MathJax_Preview class

CSS snippet

.MathJax_Preview {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url(https://anishmprasad.com/images/loader.gif);
  background-repeat: no-repeat;
 }
 math{
   display:none
 }

demo jsfiddle here

I hope this way solves your problem

Displaying Spinner until Mathjax loaded even with direct anchors URL

2 Answers2