Loading spinner
deprecated v2.0.0

This component is now deprecated and will be removed/refactored in v2.0.0

Introduction

A loading animation to inform the user there is currently a delay in displaying requested information or completing a task due to some ongoing process, which may or may not temporarily impede their progress.

Please note there is an accompanying JavaScript module, jquery.pfLoading.js that can be used to add/replace or remove/revert this loading element to/with a specific HTML target. It is strongly advised to use this script whenever possible, so that changes to the loading element can be made more universally in one place and to maintain consistency over time.

Examples

Basic spinner

<span class="loading"></span>

Dependencies

  • src/styles/components/elements/_loading.scss
  • src/scripts/modules/jquery.pfLoading.js

Usage

Class/JavaScript Hook Description Required?
.loading Creates a loading spinner on an empty HTML tag Required.
$.pfLoading.insert($target, classes) $target: jQuery object of target HTML elementclasses: String of space-separated css modifying classes Appends loading element to the target and add any defined classes to the loading element.
$.pfLoading.remove($target) $target: jQuery object of target HTML element Removes loading element from the $target.
$.pfLoading.replace($target, classes) $target: jQuery object of target HTML element classes: String of space-separated css modifying classes Visually replaces the $target with the loading element and adds the relevant classes, if defined.
$.pfLoading.revert($target) $target: jQuery object of target HTML element Visually reverts a previously replaced $target by removing the loading element and displaying the $target again.