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

Question

我很确定有很多关于此的文章。事实上，我见过很多我以前用过的东西。问题是，我正在使用Google的Material Design。所以他们已经在框架中加载了元素。它看起来像这样：

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

以前我遇到过这种事情的麻烦。如果有人可以帮助我，那就太棒了。

以下是加载动画的外观链接： https://getmdl.io/components/index.html#loading-section（它是微调器）。

Answer 1

页面加载解决方案

MDL微调器

MDL只提供微调器，由开发人员将其集成到页面中，以满足您的需求。在这种情况下，您希望在页面加载时使用它。

放置微调器

要创建加载微分器，首先需要在文档顶部放置<div class="mdl-spinner mdl-js-spinner is-active">。我建议在结束</head>标记之上。

使微调器居中。

要使微调器居中，您可以使用弹性框这样做。 将微调器放在结束</head>

上方的容器内

HTML

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

CSS

使用flexbox将微调器居中。 spinner设置为display:none以将其隐藏在视图atm中。添加一个spinner-on类并为其提供display属性flex，当我们想要显示它时，我们会使用jQuery触发它。

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

使用jQuery触发

使用jQuery，我们触发我们的spinner-on类，它将spinner带入视图。然后我们使用淡入淡出函数淡入微调器并在一段时间后将其淡出。还设置了溢出，我们现在可以滚动页面。

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

DEMO