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 ANY 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-progress-bar')
19export class LitProgressBar extends BaseElement {
20  static get observedAttributes(): string[] {
21    return ['loading'];
22  }
23
24  get loading(): boolean {
25    return this.hasAttribute('loading');
26  }
27
28  set loading(value: boolean) {
29    if (value) {
30      this.setAttribute('loading', '');
31    } else {
32      this.removeAttribute('loading');
33    }
34  }
35
36  initElements(): void {}
37
38  initHtml(): string {
39    return `
40        <style>
41            :host{
42                width: 100%;
43                height: 1px;
44                display: flex;
45                position: absolute;
46                overflow: hidden;
47            }
48            .root{
49                width: 100%;
50                height: 100%;
51                position:relative;
52            }
53            :host([loading]) .track1{
54                position: absolute;
55                width: 30%;
56                height: 100%;
57                background-image: linear-gradient(to right,transparent,  #535da6, #535da6, #535da6, #535da6,#535da6,transparent);
58                left: -30%;
59                animation: anim 1.7s linear 0s infinite;
60            }
61            :host([loading]) .track2{
62                position: absolute;
63                width: 30%;
64                height: 100%;
65                background-image: linear-gradient(to right,transparent,  #535da6, #535da6, #535da6, #535da6,#535da6,transparent);
66                left: -30%;
67                animation: anim 1.7s  ease-in-out  0.7s infinite;
68            }
69            @keyframes anim {
70              0% {
71                left:-30%;
72              }
73
74              100% {
75                left:100%;
76              }
77            }
78
79        </style>
80        <div class="root">
81            <div class="track1"></div>
82            <div class="track2"></div>
83        </div>
84        `;
85  }
86}
87