1 | import { css, customElement, html, LitElement } from 'lit-element'
|
2 |
|
3 | @customElement('loader-element')
|
4 | export class Loader extends LitElement {
|
5 | static get styles() {
|
6 | return css`
|
7 | @keyframes pulse-opacity {
|
8 | 0% {
|
9 | opacity: 1;
|
10 | }
|
11 | 16.666% {
|
12 | opacity: 1;
|
13 | }
|
14 | 100% {
|
15 | opacity: 0;
|
16 | }
|
17 | }
|
18 | .Loading {
|
19 | transform: translate(-50%, -50%) rotate(30deg);
|
20 | height: 81px;
|
21 | width: 90px;
|
22 | position: absolute;
|
23 | left: 50%;
|
24 | top: 50%;
|
25 | }
|
26 | .Loading .tri.upwards {
|
27 | border-top: 0;
|
28 | border-bottom: 27px solid #fff;
|
29 | }
|
30 | .Loading .tri:first-child {
|
31 | left: 15px;
|
32 | border-bottom-color: #00c9a4;
|
33 | }
|
34 | .Loading .tri:nth-child(2) {
|
35 | left: 30px;
|
36 | animation-delay: 0.1s;
|
37 | border-top-color: #00ffd0;
|
38 | }
|
39 | .Loading .tri:nth-child(3) {
|
40 | left: 45px;
|
41 | animation-delay: 0.2s;
|
42 | border-bottom-color: #00d7d1;
|
43 | }
|
44 | .Loading .tri:nth-child(4) {
|
45 | left: 45px;
|
46 | top: 27px;
|
47 | animation-delay: 0.3s;
|
48 | border-top-color: #0095be;
|
49 | }
|
50 | .Loading .tri:nth-child(5) {
|
51 | top: 27px;
|
52 | left: 30px;
|
53 | animation-delay: 0.4s;
|
54 | border-bottom-color: #007296;
|
55 | }
|
56 | .Loading .tri:nth-child(6) {
|
57 | top: 27px;
|
58 | left: 15px;
|
59 | animation-delay: 0.5s;
|
60 | border-top-color: #1c1f27;
|
61 | }
|
62 | .Loading .tri,
|
63 | .Loading .tri.upwards {
|
64 | border-left: 15px solid transparent;
|
65 | border-right: 15px solid transparent;
|
66 | }
|
67 | .Loading .tri {
|
68 | position: absolute;
|
69 | opacity: 0;
|
70 | animation: pulse-opacity 0.6s ease-in infinite;
|
71 | border-top: 27px solid #fff;
|
72 | border-bottom: 0;
|
73 | }
|
74 | `
|
75 | }
|
76 | public render() {
|
77 | return html`
|
78 | <div class="Loading">
|
79 | <div class="tri upwards"></div>
|
80 | <div class="tri"></div>
|
81 | <div class="tri upwards"></div>
|
82 | <div class="tri"></div>
|
83 | <div class="tri upwards"></div>
|
84 | <div class="tri"></div>
|
85 | </div>
|
86 | `
|
87 | }
|
88 | }
|