Introduction

Presentational loading spinners, using the Prodigy logo to indicate XHR-esque processes are taking place.

Users would control how and when the component is displayed on the page.

Examples

Loading spinner

<svg class="pf-loading">
      <use xlink:href="/v1.7/assets/images/icons/loading.svg#loading" />
    </svg>

Small loading spinner

<svg class="pf-loading pf-loading--small">
      <use xlink:href="/v1.7/assets/images/icons/loading.svg#loading" />
    </svg>

Dependencies

  • src/styles/base/*.scss
  • src/styles/components/blocks/_pf-loading.scss

Usage

Class/JavaScript Hook Description Required?
.pf-loading Placed on the svg you want to display as a loading icon. Icons inherit the font size and colour of its parent container. Required
.pf-loading--small Displays as a small icon with a less visually complex animation. Optional