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.
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.
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
Next we will build out the script that generates the loading indicator.
We start the script by querying the button that triggers the alert.
Then we create a function that will load the indicator while data is loading. In this example we use ajax.
Important Note: You must set the
loadedboolean yourself once your AJAX request is complete.
Finally we add the event listener to the button that triggers the script.
Important note: To view the full script we used in this demo you can view it on GitHub.
All attributes in this API are optional.
|String||unset||The word the user will see while the external content is still loading. Defaults to "loading...".|
|String||unset||The word the user will see while the external content has finished loading. Defaults to "loaded!".|
|Bool||unset||Whether or not the AJAX request has finished. Setting this will display the |
There are no event that get emitted.
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.