AMP
  • websites

Custom Loading Indicators

Introduction

While the AMP runtime fetches content from endpoints, it will display a loading indicator. This indicator is used by amp-list, amp-iframe, amp-video, and any other components that talk to an endpoint. While the loading indicator is not intended yet to be fully customizable, this sample shows how some custom styling can still be applied.

Setup

We use amp-list to dynamically show the custom loading indicator.

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

We use amp-mustache as a template rendering engine for amp-list.

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

We use amp-iframe as an example for the default loading indicator.

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

CSS for the custom loading indicator

The loading indicator consists of three divs all within a div.i-amphtml-loader, which lastly is placed in a div.i-amphtml-loading-container.

We'll set up a 3D spinner instead (inspired by tobiasahlin/spinkit) for any loading indicators in elements with the class custom-loader. First we hide the dots, then we style their outer div with a CSS animation that resembles a square spinning in space. Since i-amp... classes are not meant to be customized, we'll target the .amp-active class that the runtime adds to the loader during its display.

<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>

Default loading indicator

While loading content from an endpoint, the default loading indicator (three dots) will be displayed. This iframe takes 5 seconds to be returned by the slow-iframe endpoint.

<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>

Displaying a loading indicator

The slow-json endpoint returns a basic JSON response, with a configurable delay (10 seconds), in order to see the loading indicator. Our custom loading indicator has a class of 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>
Perlu penjelasan lebih lanjut?

Jika penjelasan pada halaman ini tidak menjawab semua pertanyaan Anda, silakan hubungi pengguna AMP lainnya untuk mendiskusikan contoh penggunaan Anda yang spesifik.

Kunjungi Stack Overflow
Fitur yang tidak dijelaskan?

Proyek AMP sangat menganjurkan partisipasi dan kontribusi Anda! Kami berharap Anda akan terus ambil bagian dalam komunitas sumber terbuka kami, tetapi kami juga menerima kontribusi satu kali untuk topik tertentu yang Anda minati.

Edit sampel di GitHub