Skip to main content

Loading Indicator

Installation#

For detailed instructions, view our install section in this documentation. Make sure all of the dependencies and polyfills are loaded to make the component cross-browser compatible.

CDN#

<script src="https://unpkg.com/@pearson-ux/loading-indicator"></script>

NPM#

npm i @pearson-ux/loading-indicator --save

Demo#

Important note Loading indicator markup is not hard coded, instead its built on the fly when the trigger button is clicked. To make this happen, you will need to build your own script to trigger the loading indicator. You can see how we put everything together below, in our structure section.

<pearson-loader></pearson-loader>

Structure#

The recommended way to fire off a loading indicator is to generate the markup with JS, and not place a hardcoded <pearson-loader> tag in the document.

First we'll create a button element with an id attribute that triggers the loading indictor script

<button class="gr-btn" type="button" id="content-loader">
Load content
</button>

Next we will build out the script that generates the loading indicator.

We start the script by querying the button that triggers the alert.

const trigger = document.querySelector('#content-loader');

Then we create a function that will load the indicator while data is loading. In this example we use ajax.

function renderIndicator () {
// generate a pearson-loader element
const loadingIndicator = document.createElement('pearson-loader'),
output = document.querySelector('#output');
// add the loader element to the output div that displays to the user
output.appendChild(loadingIndicator);
// add script that loads whatever content you want to display
const xhr = new XMLHttpRequest();
// xhr code goes here
}

Important Note: You must set the loaded boolean yourself once your AJAX request is complete.

loadingIndicator.loaded = true;

Finally we add the event listener to the button that triggers the script.

trigger.addEventListener('click', renderIndicator);

Important note: To view the full script we used in this demo you can view it on GitHub.

API#

All attributes in this API are optional.

AttributeTypeDefaultDescription
loadingStateLabelStringunsetThe word the user will see while the external content is still loading. Defaults to "loading...".
finishedStateLabelStringunsetThe word the user will see while the external content has finished loading. Defaults to "loaded!".
loadedBoolunsetWhether or not the AJAX request has finished. Setting this will display the finishedStateLabel.

Events#

There are no event that get emitted.

HTML Markup#

Do you want to use your own JS to make the loader function? No problem, use the markup below along with CSS to build a loader with your own JS.

Important note: You can follow the UXF guidelines to view the suggested functionality of the alert.

Here are some basic practices to make sure the loading indicator you build is accessible.
<div class="gr-loading-indicator-wrapper" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuetext="Loading Indicator" aria-label="Loading">
<div class="loading-indicator">
<div class="loading-spinner">
<div class="container-one">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="container-two">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
</div>
<span class="label" id="label">Loading...</span>
</div>
</div>