page-load-progress
Polymer-based web component progress bar for the page load status
[ This description is mirrored from README.md at github.com/BrightspaceUI/page-load-progress on 2019-05-10 ]
d2l-page-load-progress
Polymer-based web component progress indicator. Loading quickly at first, then slower and slower until you tell it things are loaded.
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.
Links
Compatibility
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
page-load-progress - Vaadin Add-on Directory
Polymer-based web component progress bar for the page load status
Documentation
View on GitHub
GitHub Homepage
Issue tracker
page-load-progress version 0.0.1
### Dependencies
* polymer#Polymer/polymer#^1.0.0
* vui-colors#^1.0.1
page-load-progress version 0.0.2
### Dependencies
* polymer#Polymer/polymer#^1.0.0
* vui-colors#^1.0.1
page-load-progress version 0.0.3
### Dependencies
* polymer#Polymer/polymer#^1.0.0
* vui-colors#^1.0.1
page-load-progress version 1.0.0
### Dependencies
* d2l-colors#~2.0.0
* polymer#Polymer/polymer#^1.5.0
page-load-progress version 1.1.0
### Dependencies
* d2l-colors#^2.1.0
* polymer#^1.5.0
page-load-progress version 1.1.1
### Dependencies
* d2l-colors#^2.1.0
* polymer#^1.5.0
page-load-progress version 1.2.0
### Dependencies
* d2l-colors#^2.1.0
* polymer#^1.5.0
page-load-progress version 1.2.1
### Dependencies
* d2l-colors#^2.2.3
* polymer#^1.7.0
page-load-progress version 1.2.2
### Dependencies
* d2l-colors#^2.2.3
* polymer#^1.7.0
page-load-progress version 1.2.3
### Dependencies
* d2l-colors#^2.4.0
* polymer#^1.9.0
page-load-progress version 2.0.0
### Dependencies
* d2l-colors#^2.4.0 || ^3.1.0
* polymer#Polymer/polymer#1.9 - 2
page-load-progress version 2.0.1
### Dependencies
* d2l-colors#^3.1.2
* polymer#1 - 2
page-load-progress version 2.1.0
### Dependencies
* d2l-colors#^3.1.2
* polymer#1 - 2
page-load-progress version 2.2.0
### Dependencies
* d2l-colors#^3.1.2
* polymer#1 - 2
page-load-progress version 2.3.0
### Dependencies
* d2l-colors#^3.1.2
* polymer#1 - 2
page-load-progress version 2.4.0
### Dependencies
* d2l-colors#^3.1.2
* polymer#1 - 2
page-load-progress version 2.5.0
### Dependencies
* d2l-colors#^3.1.2
* polymer#1 - 2