page-load-progress | Vaadin

Polymer-based web component progress bar for the page load status

[ This description is mirrored from at on 2019-05-10 ]


Published on 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 components, refer to The Brightspace UI Guide.


Install from Bower:

bower install d2l-page-load-progress


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

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

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 page content here.

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');

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


To start automatically, set the autostart attribute:

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


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>


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

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


Commits and PR merges to master will automatically do a minor version bump which will:

  • Update the version in package.json
  • Add a tag matching the new version
  • Create a github release matching the new version

By using either [increment major] or [increment patch] notation inside your merge message, you can overwrite the default version upgrade of minor to the position of your choice.


Link to this version
ImportedReleased 10 April 2019Apache License 2.0
Framework Support
Polymer 2.0+
Also supported:
Polymer 1 (1.2.3)
Browser Independent
Install with
bower install --save BrightspaceUI/page-load-progress"#2.5.0"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 2.5.0


  • d2l-colors#^3.1.2
  • polymer#1 - 2