Introduce an active property on wl-progress-spinner

[rwestlund]

When using the spinner in indeterminate mode (e.g. during an AJAX call), there's no obvious way to hide it. I'd imagine writing something like:

<wl-progress-spinner ?active="${this.loading}"></wl-progress-spinner>

I tried setting wl-progress-spinner:not([active]) { visibility: hidden; }, but it pops in and out in a jarring way.

Polymer's paper-spinner uses a fade in/out that worked well: https://github.com/PolymerElements/paper-spinner

[andreasbm]

Hi, thanks for opening an issue 👍

I can definitely see why you need this feature. Right now the indeterminate mode is assumed as always being active and it is therefore up to the library consumers to either hide or show the spinner. I will consider adding an active property in the future.

For now I'll advise you to introduce a data-active attribute that you can toggle yourself on the spinner and hide it using some CSS like this.

wl-progress-spinner:not([data-active]) {
  visibility: hidden;
}

I made a Codepen you can look at for inspiration https://codepen.io/andreasbm/pen/NWWXBaV.