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