@brightspace-ui-labs/page-load-progress v3.1.0
d2l-page-load-progress
Note: this is a "labs" component. While functional, these tasks are prerequisites to promotion to BrightspaceUI "official" status:
- Design organization buy-in
- design.d2l entry
- Architectural sign-off
- Continuous integration
- Cross-browser testing
- Unit tests (if applicable)
- Accessibility tests
- Visual diff tests
- Localization with Serge (if applicable)
- Demo page
- README documentation
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
To install from NPM:
npm install @brightspace-ui/page-load-progress
Usage
Include the webcomponents.js polyfill loader (for browsers who don't natively support web components), then include d2l-page-load-progress.js
:
<head>
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module" src="node_modules/@brightspace-ui/page-load-progress/d2l-page-load-progress.js"></script>
</head>
The custom element <d2l-labs-page-load-progress>
can now be used in your page. The best place for it is usually at the very top:
<d2l-labs-page-load-progress autostart color="#003b71"></d2l-labs-page-load-progress>
<button onclick="document.querySelector('d2l-labs-page-load-progress').start();">Start</button>
<button onclick="document.querySelector('d2l-labs-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-labs-page-load-progress autostart></d2l-labs-page-load-progress>
Color
By default, the progress bar will be grayscale. However, the color can be customized using the color
attribute:
<d2l-labs-page-load-progress color="#d81b60"></d2l-labs-page-load-progress>
Auto-hide
The autohide
property will set display: hidden
on the progress bar when finish
is called:
<d2l-labs-page-load-progress autohide></d2l-labs-page-load-progress>
Versioning, Releasing & Deploying
All version changes should obey semantic versioning rules.
Releases use the semantic-release tooling and the angular preset for commit message syntax. Upon release, the version in package.json
is updated, a tag and GitHub release is created and a new package will be deployed to NPM.
Commits prefixed with feat
will trigger a minor release, while fix
or perf
will trigger a patch release. A commit containing BREAKING CHANGE
will cause a major release to occur.
Other useful prefixes that will not trigger a release: build
, ci
, docs
, refactor
, style
and test
. More details in the Angular Contribution Guidelines.