Contact us
Get started

Directory

← Back

page-load-progress

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

Author

Contributors

Rating

Links

[ This description is mirrored from README.md at github.com/BrightspaceUI/page-load-progress on 2019-05-10 ]

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

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>

Versioning

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.

Compatibility

(Loading compatibility data...)

Last updated: 2017-08-10

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • d2l-colors#^3.1.2
  • polymer#1 - 2
Released
2019-04-10
Maturity
IMPORTED
License
Apache License 2.0

Compatibility

Framework
Polymer 2.0+
Polymer 1.0+ in 1.2.3
Browser
Browser Independent
Online