Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | 92x 184x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x | import { html, TemplateResult, css, LitElement } from 'lit';
import { property } from 'lit/decorators.js';
import { styleMap } from 'lit-html/directives/style-map.js';
import { range } from '../utils';
export class Loading extends LitElement {
static get styles() {
return css`
:host {
display: block;
}
.loading-unit {
border: 1px inset rgba(0, 0, 0, 0.05);
animation: loading-pulse 0.9s cubic-bezier(0.3, 0, 0.7, 1) infinite;
}
.loading-container {
display: flex;
}
@keyframes loading-pulse {
0% {
transform: scale(0.2);
opacity: 0.1;
}
20% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0.2);
opacity: 0.1;
}
}
`;
}
@property({ type: String })
color = 'var(--color-primary-dark)';
@property({ type: Number })
size = 5;
@property({ type: Number })
units = 5;
@property({ type: Boolean })
square?: boolean;
@property({ type: String })
direction = 'row';
public render(): TemplateResult {
const margin = this.size / 2;
return html`
<div class="loading-container" style="flex-direction:${this.direction}">
${range(0, this.units).map((num: number) => {
const ballStyle = {
'border-radius': this.square ? '0' : '50%',
width: this.size + 'px',
height: this.size + 'px',
margin: margin + 'px',
animationDelay: `-${1 - num * (1 / this.units)}s`,
background: this.color
};
return html`
<div class="loading-unit" style=${styleMap(ballStyle)}></div>
`;
})}
</div>
`;
}
}
|