cuba-progress-indicator.html

<link rel="import" href="../polymer/polymer.html">

<dom-module id="cuba-progress-indicator">
  <template>
    <style>
      :host {
        display: block;
      }

      #progress {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        z-index: 500;
        height: var(--progress-height, 3px);

        background-color: var(--progress-color, #0040a8);
      }

      .grow {
        animation: grow 1.5s linear forwards,
        blink 0.5s linear 1.65s infinite alternate;
      }

      .finish {
        animation: finish 0.075s forwards, hide 0.001s 0.3s forwards;
      }

      @keyframes blink {
        0% {
          opacity: 1;
        }
        100% {
          opacity: 0.4;
        }
      }

      @keyframes grow {
        0% {
          width: 0;
        }
        100% {
          width: 95%;
        }
      }

      @keyframes finish {
        100% {
          width: 100%;
        }
      }

      @keyframes hide {
        100% {
          width: 0;
        }
      }
    </style>

    <div id="progress"></div>

  </template>
  <script>
    {
      /**
       *  `<cuba-progress-indicator>` is a Polymer 2 element for data loading progress indication.
       *
       * ```html
       * <cuba-progress-indicator></cuba-progress-indicator>
       * ```
       *
       * ### Styling
       *
       * `<cuba-progress-indicator>` provides the following custom properties and mixins
       * for styling:
       *
       * Custom property | Description | Default
       * ----------------|-------------|----------
       * `--progress-height` | Height of the progress indicator | `3px`
       * `--progress-color`  | Color of the progress indicator  |  `#0040a8`
       *
       */
      class CubaProgressIndicator extends Polymer.Element {
        constructor() {
          super();
          this._loadingStartListener = this._incrementCounter.bind(this);
          this._loadingFinishListener = this._decrementCounter.bind(this)
        }

        static get is() {
          return 'cuba-progress-indicator'
        }

        static get properties() {
          return {
            _loadingCounter: {
              type: Number,
              value: 0,
              readOnly: true,
              observer: '_counterChanged'
            }
          }
        }

        connectedCallback() {
          super.connectedCallback();

          document.body.addEventListener('cuba-data-loading-start', this._loadingStartListener);
          document.body.addEventListener('cuba-data-loading-finish', this._loadingFinishListener);
          document.body.addEventListener('cuba-data-loading-error', this._loadingFinishListener);
        }

        disconnectedCallback() {
          super.disconnectedCallback();

          document.body.removeEventListener('cuba-data-loading-start', this._loadingStartListener);
          document.body.removeEventListener('cuba-data-loading-finish', this._loadingFinishListener);
          document.body.removeEventListener('cuba-data-loading-error', this._loadingFinishListener);
        }

        _incrementCounter() {
          this._set_loadingCounter(this._loadingCounter + 1);
        }

        _decrementCounter() {
          this._set_loadingCounter(this._loadingCounter - 1);
        }

        _counterChanged(counter) {
          if (counter > 0) {
            this.$.progress.classList.remove('finish');
            this.$.progress.classList.add('grow');
          } else {
            this.$.progress.classList.remove('grow');
            this.$.progress.classList.add('finish');
          }
        }
      }

      customElements.define(CubaProgressIndicator.is, CubaProgressIndicator);
    }
  </script>
</dom-module>