自定义加载指示器

简介

当 AMP 运行时从端点获取内容时，它将显示一个加载指示器。此指示器由 amp-list、amp-iframe、amp-video 以及任何其他与端点通信的组件使用。虽然加载指示器尚未旨在完全可自定义，但此示例展示了如何应用一些自定义样式。

设置

我们使用 amp-list 来动态显示自定义加载指示器。

<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>

我们使用 amp-mustache 作为 amp-list 的模板渲染引擎。

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

我们使用 amp-iframe 作为默认加载指示器的示例。

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

自定义加载指示器的 CSS

加载指示器由三个 div 组成，它们都位于 div.i-amphtml-loader 内，最后放置在 div.i-amphtml-loading-container 中。

我们将为具有类 custom-loader 的元素中的任何加载指示器设置一个 3D 旋转器（灵感来自 tobiasahlin/spinkit）。首先，我们隐藏这些点，然后使用 CSS 动画来设置它们外部 div 的样式，该动画类似于在空间中旋转的正方形。由于i-amp... 类不是为了自定义而设计的，我们将定位运行时在其显示期间添加到加载程序的 .amp-active 类。

<style amp-custom>
  amp-list, amp-iframe {
    margin-left: 1em;
  }

  .custom-loader .amp-active {
    max-width: 10%;
    max-height: 50%;
    width: 2em;
    height: 2em;
    background-color: #333;

    margin: -1em auto;
    animation: sk-rotateplane 1.2s infinite ease-in-out;
  }
  @keyframes sk-rotateplane {
    0% { transform: perspective(120px); }
    50% { transform: perspective(120px) rotateX(-180deg); }
    100% { transform: perspective(120px) rotateX(-180deg) rotateY(-180deg); }
  }
  /* Hide the three default dots */
  .custom-loader .amp-active > div {
    display: none;
  }

</style>

默认加载指示器

当从端点加载内容时，将显示默认加载指示器（三个点）。此 iframe 需要 5 秒才能由 slow-iframe 端点返回。

<amp-iframe title="Displays default loading indicator (three dots) for 5 seconds" width="auto" height="250" layout="fixed-height" frameborder="0" src="/documentation/examples/api/slow-iframe/?delay=5000">
</amp-iframe>

显示加载指示器

slow-json 端点返回一个基本的 JSON 响应，具有可配置的延迟（10 秒），以便查看加载指示器。我们的自定义加载指示器的类为 custom-loader。

<amp-list class="custom-loader" width="auto" height="250" layout="fixed-height" src="/documentation/examples/api/slow-json/?delay=5000" binding="no">
          <template type="amp-mustache">
            <div>
              <p>{{title}}</p>
            </div>
          </template>
</amp-list>

需要进一步解释吗？

如果此页面上的解释未涵盖您所有问题，请随时与其他 AMP 用户联系，讨论您的具体用例。

前往 Stack Overflow

未解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您成为我们开源社区的持续参与者，但我们也欢迎您为自己特别关注的问题做出一次性贡献。

在 GitHub 上编辑示例

撰写者： @dandv