Page Load Progress on GitHub

Page Load Progress

The page-load-progress component is a load progress indicator. Once initialized, it will move quickly at first, then load progressively slower until told to finish.

To create a page-load-progress component, use the <d2l-page-load-progress> element.

To start automatically, include the autostart attribute.

Example (html)
<d2l-page-load-progress autostart></d2l-page-load-progress>

Custom Color or Size

The d2l-page-load-progress style can be customized by specifying a color attribute on the element.

Example (html)
<d2l-page-load-progress autostart color="#e57231"></d2l-page-load-progress>

Starting and finishing

Progress can be started, restarted and finished using the JavaScript API’s start() and finish() methods. Make sure the WebComponentsReady event has fired before interacting with the API.

Example (html)
<d2l-page-load-progress id="example"></d2l-page-load-progress><br>
<d2l-button id="start">Start</d2l-button>
<d2l-button id="finish">Finish</d2l-button>
<script>
window.addEventListener('WebComponentsReady', function() {
	var example = document.getElementById('example');
	document.getElementById('start')
		.addEventListener('click', function() { example.start(); });
	document.getElementById('finish')
		.addEventListener('click', function() { example.finish(); });
});
</script>

Start Finish

Developing with Page Load Progress

Installation

To use this component in your application, you can install it using Bower:

bower install d2l-page-load-progress

Then import the components you need:

Example (html)
<link
  rel="import"
  href="bower_components/d2l-page-load-progress/d2l-page-load-progress.html">

Show me the code!

Want to see, contribute or learn more about the code?
Check out "BrightspaceUI/page-load-progress" on GitHub!

More information on developing with Brightspace UI components can be found in the Developer Guide.