如何使用Material Framework制作载入画面？

Question

I am pretty sure there are many articles on this. In fact, I have seen many that I have used before. The thing is, I am using Material Design by Google. So they have loading elements already in the framework. It looks something like this:

<div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>

Previously I have had trouble with this kinda thing. If someone could help me out, that would be great.

Here is the link to what the loading animation looks like: https://getmdl.io/components/index.html#loading-section (it is the spinner).

Answer 1

MDL spinner on page load solution

MDL just provides the spinner and it's up to the developer to integrate it into the page for what ever your need's may be. In this case you want to use it on page load.

Placing the spinner

To create a loading spinner you first need to place a <div class="mdl-spinner mdl-js-spinner is-active"> at the top of your document. I suggest right above the closing </head> tag.

Centering the spinner.

To center the spinner you can do it with flex box like so. Place the spinner inside a container above the closing </head>

HTML

<div class="spinner">
  <div class="mdl-spinner mdl-js-spinner is-active"></div>
</div>

CSS

Centering the spinner with flexbox. The spinner is set to display:none to hide it from view atm . Adding a class of spinner-on and giving it the display property of flex that we trigger on with jQuery when we want to show it.

$spinner-size:100px;
html, body, .spinner{
  height:100%;
  overflow: hidden;
}

.mdl-spinner{
  height:$spinner-size;
  width:$spinner-size;
}

.spinner{
  position:relative;
  display: none;
  align-items: center;
  justify-content: center;
}

.spinner-on {
 display: flex;
}

Trigger with jQuery

With jQuery we trigger our spinner-on class which brings spinner into view. Then we use fading functions to fade in the spinner and fade it out after a set amount of time. Overflow is also set se we can now scroll the page.

$(function() {
    var overflow = $('body,html, .spinner');
    $(".spinner").addClass('spinner-on');
    $(".spinner").fadeOut(2000, function() {
        $("body").fadeIn(2000);
        overflow.css('overflow','visible');
    });
});

DEMO