【问题标题】：How to use spinner provided in Material design lite?如何使用 Material design lite 中提供的微调器？
【发布时间】：2015-12-26 11:25:51
【问题描述】：

我希望微调器在页面加载时出现，然后在页面加载后慢慢消失。如何使用 Material Design lite 实现此功能？

【问题讨论】：

您能分享一下您已经尝试过的方法以及您遇到的问题吗？
smallenvelop.com/display-loading-icon-page-loads-completely/ .....我正在使用这篇文章中解释的方法。但是他们使用了 gif 文件，而我正在尝试使用 material-design-lite 中提供的内置类 mdl-spinner。

标签： material-design-lite

【解决方案1】：

微调器的 HTML 是这样的：

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

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

componentHandler.upgradeDom();

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

【讨论】：

【解决方案2】：

页面加载解决方案中的 MDL 微调器

MDL 仅提供 spinner，开发人员可以根据需要将其集成到页面中。在这种情况下，您希望在页面加载时使用它。

放置微调器

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

使微调器居中。

要使微调器居中，您可以像这样使用 flex box 来实现。将微调器放在关闭</head>上方的容器内

HTML

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

CSS

使用 flexbox 使微调器居中。 spinner 设置为 display:none 以将其隐藏在视图 atm 中。添加一个 spinner-on 类，并为其提供 flex 的 display 属性，当我们想要显示它时，我们会使用 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 类，它将微调器带入视野。然后我们使用淡入淡出函数淡入微调器，并在设定的时间后淡出。也设置了溢出，我们现在可以滚动页面了。

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

DEMO

【讨论】：