<style include="cros-color-overrides">
html,
body {
height: 100%;
}
#webviewDiv {
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>
<parent-access-template>
<span slot="main">
<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>
</span>
</parent-access-template>