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>
Besoin de plus amples explications ?

Si les explications de cette page ne répondent pas à vos questions, n'hésitez pas à contacter d'autres utilisateurs d'AMP pour discuter de votre cas d'utilisation spécifique.

Se rendre sur Stack Overflow
Une fonctionnalité n'a pas encore été expliquée ?

Le projet AMP encourage fortement votre participation et vos contributions ! Nous espérons que vous deviendrez un membre régulier de notre communauté open source, mais nous serons également ravis de recevoir des contributions ponctuelles concernant les questions qui vous intéressent particulièrement.

Modifier l'exemple sur GitHub