自定义加载指示器

简介

当 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 都位于 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