89 lines
1.6 KiB
JavaScript
89 lines
1.6 KiB
JavaScript
import { LitElement, html, css } from 'lit'
|
|
|
|
class Loading extends LitElement {
|
|
static properties = {
|
|
nobg: { type: Boolean }
|
|
}
|
|
|
|
constructor() {
|
|
super()
|
|
this.nobg = false
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<div class=${this.nobg ? '' : 'pulse'}>
|
|
<span class="loading">Loading<span class="d1">.</span><span class="d2">.</span><span class="d3">.</span></span>
|
|
</div>
|
|
`
|
|
}
|
|
|
|
static styles = css`
|
|
:host {
|
|
--fade-duration: 0.125s;
|
|
--pulse-duration: 0.75s;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
div {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
}
|
|
|
|
div.pulse {
|
|
opacity: 0;
|
|
background-color: #ffffff60;
|
|
animation:
|
|
fadeIn var(--fade-duration) ease-in forwards,
|
|
pulse var(--pulse-duration) ease-in-out alternate infinite;
|
|
}
|
|
|
|
.loading {
|
|
--dot-duration: 1s;
|
|
font-size: 2em;
|
|
font-style: italic;
|
|
font-weight: 200;
|
|
color: white;
|
|
}
|
|
|
|
.d1, .d2, .d3 {
|
|
opacity: 0;
|
|
animation: dot var(--dot-duration) alternate infinite;
|
|
}
|
|
|
|
.d2 {
|
|
animation-delay: calc(var(--dot-duration) * 0.3);
|
|
}
|
|
|
|
.d3 {
|
|
animation-delay: calc(calc(var(--dot-duration) * 0.3) * 2);
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes dot {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
from {
|
|
background-color: #ffffff20;
|
|
}
|
|
to {
|
|
background-color: #ffffff00;
|
|
}
|
|
}
|
|
`
|
|
}
|
|
|
|
customElements.define('mm-loading', Loading)
|