**[ 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 Start Finish

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 ``` ### Color By default, the progress bar will be grayscale. However, the color can be customized using the `color` attribute: ```html ``` ### Auto-hide The `autohide` property will set `display: hidden` on the progress bar when `finish` is called: ```html ``` [bower-url]: http://bower.io/search/?q=d2l-page-load-progress [bower-image]: https://badge.fury.io/bo/d2l-page-load-progress.svg [ci-url]: https://travis-ci.org/BrightspaceUI/page-load-progress [ci-image]: https://travis-ci.org/BrightspaceUI/page-load-progress.svg?branch=master ## 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.