自訂載入指示器

簡介

當 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