| <!-- 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> |