Non-Trivial Spinner Example?

  • I’m trying to create a spinner to display when a button is clicked on in the dashboard. I’m trying to use this page:

    Spinners and dismissible admin notices in 4.2

    for guidance. I’ve got some code:

    <div id="MySpinner" class="spinner">
<h1>My Message</h1>
</div>

<script type="text/javascript">
function showSpinner(){
jQuery("#MySpinner").addClass("is-active");
return true;
}
</script>

<input type=submit onclick="return showSpinner();">

    When I click on the button, the spinner appears. My message is displayed. The other page content is visible underneath my message.

    So, while I’m getting a spinner, it’s not very usable. What I’d like is for my message to be displayed prominently, and some sort of visual indicator that the rest of the page is disabled pending completion of the operation.

    I’d appreciate any ideas on the best way to handle this.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    I think you just need your script to set some CSS or add a class that causes the proper CSS to be applied. To get the page to appear disabled, wrap all the content except the spinner and message in a main container div. The spinner and message can be positioned with position: fixed; so it doesn’t matter where it occurs in HTML, as long as it’s not in the main container. The script can add something like filter: brightness(40%); to darken everything in the main container.

    To give the message prominence, add CSS rules for the message to make it prominent, perhaps a bordered box, or large, bold white text with a red drop shadow, transparent background. (red shows up nicely against the main container 40% brightness, yet contrasts from the white text, use whatever colors you like though)

    When the operation finishes, remove the added classes or reset the CSS to their original values.

    Thread Starter George Sexton

    (@gsexton)

    OK, thanks for the ideas. I was thinking there was more magic in the WordPress CSS spinner than there is.

    I looked though the WordPress code base to see how they’re using the spinner. As of 4.7.2 it’s only used in the Settings | General page. It’s tied to the custom date formats. When you update the date formats, the spinner appears off to the right of the input indicating the time is being queried from the back-end.

    In short, the new HTML/CSS spinner is a specific needs thing suitable for indicating some sort of AJAX operation is going on. It’s not a full-scale, general purpose spinner.

    • This reply was modified 7 years, 9 months ago by George Sexton.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Non-Trivial Spinner Example?’ is closed to new replies.