| <style> |
| html, |
| body { |
| height: 100%; |
| } |
| |
| #webviewDiv { |
| background-color: var(--cros-bg-color-elevation-1); |
| height: 100vh; |
| } |
| |
| #webview { |
| display: flex; |
| height: 100%; |
| } |
| |
| #webview[hidden], |
| .spinner-container[hidden] { |
| display: none; |
| } |
| |
| paper-spinner-lite { |
| display: none; |
| height: 38px; |
| margin-bottom: 28px; |
| width: 38px; |
| } |
| |
| paper-spinner-lite[active] { |
| display: inline-block; |
| } |
| |
| .spinner-container { |
| align-items: center; |
| display: flex; |
| flex-direction: column; |
| height: 100%; |
| justify-content: center; |
| width: 100%; |
| } |
| </style> |
| </div> |
| <div id="webviewDiv" role="dialog" |
| aria-label="$i18n{pageTitle}"> |
| <webview id="webview" hidden$="[[webviewLoading]]"></webview> |
| <div class="spinner-container" hidden$="[[!webviewLoading]]"> |
| <paper-spinner-lite class="spinner" active="[[webviewLoading]]"> |
| </paper-spinner-lite> |
| <div aria-live="polite" aria-label$="$i18n{webviewLoadingMessage}"> |
| $i18n{webviewLoadingMessage} |
| </div> |
| </div> |
| </div> |