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 | 125x 243x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x | 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>
`;
}
}
|