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