• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (C) 2022 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF unknown KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16import { BaseElement, element } from '../BaseElement';
17
18@element('lit-loading')
19export class LitLoading extends BaseElement {
20
21  initHtml(): string {
22    return `
23            <style>
24            .loadEl {
25                display:flex;
26                flex-flow:column;
27                align-items:center;
28            }
29            .loading,.loading > div {
30                position: relative;
31                box-sizing: border-box;
32            }
33
34                .loading {
35                  display: block;
36                  font-size: 0;
37                  color: #000;
38                }
39
40                .loading.la-dark {
41                  color:#333;
42                }
43
44                .loading > div {
45                  display: inline-block;
46                  float: none;
47                  background-color: currentColor;
48                  border: 0 solid currentColor;
49                }
50
51                .loading {
52                  width: 32px;
53                  height: 32px;
54                }
55
56                .loading > div {
57                  position: absolute;
58                  top: 50%;
59                  left: 50%;
60                  width: 8px;
61                  height: 8px;
62                  margin-top: -4px;
63                  margin-left: -4px;
64                  border-radius: 100%;
65                  animation: ball-spin 1s infinite ease-in-out;
66                }
67
68                .loading > div:nth-child(1) {
69                  top: 5%;
70                  left: 50%;
71                  animation-delay: -1.125s;
72                }
73
74                .loading > div:nth-child(2) {
75                  top: 18.1801948466%;
76                  left: 81.8198051534%;
77                  animation-delay: -1.25s;
78                }
79
80                .loading > div:nth-child(3) {
81                  top: 50%;
82                  left: 95%;
83                  animation-delay: -1.375s;
84                }
85
86                .loading > div:nth-child(4) {
87                  top: 81.8198051534%;
88                  left: 81.8198051534%;
89                  animation-delay: -1.5s;
90                }
91
92                .loading > div:nth-child(5) {
93                  top: 94.9999999966%;
94                  left: 50.0000000005%;
95                  animation-delay: -1.625s;
96                }
97
98                .loading > div:nth-child(6) {
99                  top: 81.8198046966%;
100                  left: 18.1801949248%;
101                  animation-delay: -1.75s;
102                }
103
104                .loading > div:nth-child(7) {
105                  top: 49.9999750815%;
106                  left: 5.0000051215%;
107                  animation-delay: -1.875s;
108                }
109                  .loading > div:nth-child(8) {
110                  top: 18.179464974%;
111                  left: 18.1803700518%;
112                  animation-delay: -2s;
113                }
114
115                .loading.la-sm {
116                  width: 16px;
117                  height: 16px;
118                }
119
120                .loading.la-sm > div {
121                  width: 4px;
122                  height: 4px;
123                  margin-top: -2px;
124                  margin-left: -2px;
125                }
126
127                .loading.la-2x {
128                  width: 64px;
129                  height: 64px;
130                }
131
132                .loading.la-2x > div {
133                  width: 16px;
134                  height: 16px;
135                  margin-top: -8px;
136                  margin-left: -8px;
137                }
138
139                .loading.la-3x {
140                  width: 96px;
141                  height: 96px;
142                }
143
144                .loading.la-3x > div {
145                  width: 24px;
146                  height: 24px;
147                  margin-top: -12px;
148                  margin-left: -12px;
149                }
150
151                @keyframes ball-spin {
152                  0%,
153                  100% {
154                    opacity: 1;
155                    transform: scale(1);
156                  }
157
158                  20% {
159                    opacity: 1;
160                  }
161
162                  80% {
163                    opacity: 0;
164                    transform: scale(0);
165                  }
166                }
167
168                .loadingText {
169                    margin-top:20px;
170                }
171            </style>
172            <div class="loadEl">
173                <div class="loading" id="lit-loading">
174                    <div></div>
175                    <div></div>
176                    <div></div>
177                    <div></div>
178                    <div></div>
179                    <div></div>
180                    <div></div>
181                    <div></div>
182                </div>
183                <div class="loadingText">
184                    加载中 ...
185                </div>
186            </div>
187            `;
188  }
189
190  initElements(): void {
191  }
192}