res/imp/spinner-sk.html

  <!-- The <spinner-sk> custom element declaration.

    Displays a spinner and an optional text. Usually set while content is loading.

    Attributes:
      busy - is true when spinner is active. This can hide parts of the page while
             the spinner is active.

    Events:
      None

    Methods:
      startSpinner(text) - Activates the spinner and displays 'text' next to it.

      stopSpinner() - Stops the spinner and hides the element.

  -->

<link rel="import" href="/res/imp/bower_components/polymer/polymer.html">
<link rel="import" href="/res/imp/bower_components/paper-spinner/paper-spinner.html">

<dom-module id="spinner-sk">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <div hidden$="{{!busy}}">
      <paper-spinner id="activitySpinner"></paper-spinner>
      <span>{{_text}}</span>
    </div>
  </template>
  <script>
    Polymer({
      is: 'spinner-sk',

      properties: {
        busy: {
          type: Boolean,
          value: false,
          notify: true,
          reflectToAttribute: true
        },
        _text: {
          type: String,
          value: ''
        }
      },

      startSpinner: function(text) {
        this._text = text;
        this.$.activitySpinner.active = true;
        this.set('busy', true);
      },

      stopSpinner: function() {
        this._text='';
        this.$.activitySpinner.active = false;
        this.set('busy', false);
      }

    });
  </script>
</dom-module>