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.js"; 17 18@element("lit-progress-bar") 19export class LitProgressBar extends BaseElement { 20 static get observedAttributes() { 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 39 initHtml(): string { 40 return ` 41<style> 42 :host{ 43 width: 100%; 44 height: 1px; 45 display: flex; 46 position: absolute; 47 overflow: hidden; 48 } 49 .root{ 50 width: 100%; 51 height: 100%; 52 position:relative; 53 } 54 :host([loading]) .track1{ 55 position: absolute; 56 width: 30%; 57 height: 100%; 58 background-image: linear-gradient(to right,transparent, #535da6, #535da6, #535da6, #535da6,#535da6,transparent); 59 left: -30%; 60 animation: anim 1.7s linear 0s infinite; 61 } 62 :host([loading]) .track2{ 63 position: absolute; 64 width: 30%; 65 height: 100%; 66 background-image: linear-gradient(to right,transparent, #535da6, #535da6, #535da6, #535da6,#535da6,transparent); 67 left: -30%; 68 animation: anim 1.7s ease-in-out 0.7s infinite; 69 } 70 @keyframes anim { 71 0% { 72 left:-30%; 73 } 74 75 100% { 76 left:100%; 77 } 78 } 79 80</style> 81<div class="root"> 82 <div class="track1"></div> 83 <div class="track2"></div> 84</div> 85 `; 86 } 87} 88