page-load-progress - Vaadin Add-on Directory
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](https://github.com//BrightspaceUI/page-load-progress/blob/v2.5.0/README.md) on 2019-05-10 ]**
# d2l-page-load-progress
[](https://www.webcomponents.org/element/BrightspaceUI/page-load-progress)
[![Bower version][bower-image]][bower-url]
[![Build status][ci-image]][ci-url]
[Polymer](https://www.polymer-project.org)-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](https://github.com/BrightspaceUI/guide/wiki).
## Installation
Install from [Bower][bower-url]:
```shell
bower install d2l-page-load-progress
```
## Usage
Include the [webcomponents.js](http://webcomponents.org/polyfills/) "lite" polyfill (for browsers who don't natively support web components), then import `d2l-page-load-progress.html`:
```html
```
The custom element `` can now be used in your page. The best place for it is usually at the very top:
```html
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.
```javascript
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:
```html