自訂載入指示器

簡介

當 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 撰寫