<spinner-backdrop>
The spinner-backdrop shows a paper-spinner and a backdrop overlay with a great fade-in/fade-out animation to entire container.
Perfect for page route transition!
Example:
<dom-module id="custom-element">
<template>
<spinner-page loading="{{loading}}"></spinner-page>
</dom-module>
</template>The spinner-backdrop will fill the entire custom-element container until loading gonna be false
You can do it with others elements, example:
<paper-dialog>
<spinner-page loading="{{loading}}"></spinner-page>
</paper-dialog>Combine with others elements state, example:
<iron-ajax loading="{{loading}}"></iron-ajax>
<spinner-page loading="{{loading}}"></spinner-page>Styling
The following custom properties are available for styling:
| Custom property | Description | Default |
|---|---|---|
--spinner-backdrop-overlay-color |
Color of the overlay | #FFF |
--spinner-backdrop-layer-1-color |
Color of the first spinner rotation | --google-blue-500 |
--spinner-backdrop-layer-2-color |
Color of the second spinner rotation | --google-red-500 |
--spinner-backdrop-layer-3-color |
Color of the third spinner rotation | --google-yellow-500 |
--spinner-backdrop-layer-4-color |
Color of the fourth spinner rotation | --google-green-500 |
--spinner-backdrop-stroke-width |
The width of the spinner stroke | 3px |
