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

• Written by @dandv