Question

I have put a mootools Spinner (from the More library) on my website. The spinner sits in the body of my webpage, and appears when the user does a search (which uses ajax). The spinner graphic appears at the center of the body element – so, halfway down the page. This doesn’t look good if the page is longer than one screen.

I initialize the spinner like this:

loadingSpinner = new Spinner(document.body,{message:"Fetching results..."});

For now, I’m just using the default css, like this:

.spinner {
    position: absolute;
    opacity: 0.9;
    filter: alpha(opacity=90);
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
    z-index: 999;
    background: #fff;
}
.spinner-msg {
    text-align: center;
    font-weight: bold;
}

.spinner-img {
    background: url(img/spinner.gif) no-repeat;
    width: 24px;
    height: 24px;
    margin: 0 auto;
}

.spinner-msg and spinner-img (which I want to center) both sit inside .spinner-content, so I tried doing this in this css:

.spinner-content {
    position:fixed;
    top:50%;
    left:50%;
}

But it didn’t do anything. I confirmed the the .spinner-content element was correctly receiving that css, so I assume the spinner internally uses some javascript to position the spinner instead.

How do I get the spinner to appear in the center of the screen?

Answer 1

Try this:

loadingSpinner = new Spinner(
  document.body,
  {message:"Fetching results...",
   containerPosition: {relativeTo: document.body, position: 'center'}
  }
);