AMP Conf 2019. April 17/18. Tokyo.
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

Import the amp-list and amp-mustache components in the header

<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-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="https://ampbyexample.com/samples_templates/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="https://ampbyexample.com/samples_templates/slow-json/?delay=10000">
  <template type="amp-mustache">
    <div>
      <p>{{title}}</p>
    </div>
  </template>
</amp-list>
Need further explanation?

If the explanations on this page don't cover all of your questions feel free to reach out to other AMP users to discuss your exact use case.

Go to Stack Overflow
An unexplained feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Edit sample on GitHub