Polymer-based web component progress bar for the page load status
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

d2l-page-load-progress

Published on webcomponents.org Bower version Build status

Polymer-based web component progress indicator. Loading quickly at first, then slower and slower until you tell it things are loaded.

screenshot of page load progress

For further information on this and other Brightspace UI components, see the docs at ui.developers.brightspace.com.

Installation

Install from Bower:

bower install d2l-page-load-progress

Usage

Include the webcomponents.js "lite" polyfill (for browsers who don't natively support web components), then import d2l-page-load-progress.html:

<head>
  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="../d2l-page-load-progress/d2l-page-load-progress.html">
</head>

The custom element <d2l-page-load-progress> can now be used in your page. The best place for it is usually at the very top:

<d2l-page-load-progress autostart color="#003b71"></d2l-page-load-progress>
<button onclick="document.querySelector('d2l-page-load-progress').start();">Start</button>
<button onclick="document.querySelector('d2l-page-load-progress').finish();">Finish</button>
<main>
  Main page content here.
</main>

Starting & Finishing

Progress can be started, restarted and finished using its JavaScript API's start() and finish() methods. Make sure you wait for the WebComponentsReady event before interacting with it.

window.addEventListener('WebComponentsReady', function() {

  var progress = document.getElementById('myProgress');
  progress.start();

  // take 2 seconds to "load"
  setTimeout(function() {
    progress.finish();
  }, 2000);

});

To start automatically, set the autostart attribute:

<d2l-page-load-progress autostart></d2l-page-load-progress>

Color

By default, the progress bar will be grayscale. However, the color can be customized using the color attribute:

<d2l-page-load-progress color="#d81b60"></d2l-page-load-progress>

Auto-hide

The autohide property will set display: hidden on the progress bar when finish is called:

<d2l-page-load-progress autohide></d2l-page-load-progress>