如何使用Material design lite中提供的微调器？

Question

我希望微调器在页面加载时出现，然后在页面加载后慢慢淡出。如何使用材料设计精简版实现此功能？

Answer 1

微调器的HTML是：

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

材质设计lite CSS和javascript文件将解析文档并在页面加载时将其升级为微调器。如果您想在页面加载后将其添加到页面，那么您还需要调用

componentHandler.upgradeDom();

在你的javascript中让它重新解析页面并升级新的微调器。您可以在材料设计精简版here中找到有关不同类型的微调器的文档。

Answer 2

页面加载解决方案

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;
  //top:100px;
  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