97 lines
2.1 KiB
JavaScript
97 lines
2.1 KiB
JavaScript
/**
|
|
@license
|
|
Copyright (c) 2025 trading_peter
|
|
This program is available under Apache License Version 2.0
|
|
*/
|
|
|
|
import { LitElement, html, css } from 'lit';
|
|
|
|
export class TpProgressBar extends LitElement {
|
|
static get styles() {
|
|
return css`
|
|
:host {
|
|
display: block;
|
|
}
|
|
|
|
.bar {
|
|
background: #EEEEEE;
|
|
border-radius: var(--tp-progress-bar-border-radius, 8px);
|
|
height: var(--tp-progress-bar-height, 16px);
|
|
position: relative;
|
|
overflow: hidden;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
#progress {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border-radius: 8px;
|
|
transform: translateX(-100%);
|
|
background: var(--tp-progress-bar-color, #039BE5);
|
|
transition: transform 200ms linear;
|
|
}
|
|
|
|
/* Indeterminate mode: a fixed-width indicator travels across the bar. */
|
|
:host([indeterminate]) #progress {
|
|
right: auto;
|
|
width: 40%;
|
|
transform: none;
|
|
transition: none;
|
|
animation: tp-progress-indeterminate 1.4s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes tp-progress-indeterminate {
|
|
0% {
|
|
left: -40%;
|
|
}
|
|
|
|
50% {
|
|
left: 100%;
|
|
}
|
|
|
|
100% {
|
|
left: -40%;
|
|
}
|
|
}
|
|
`;
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<div class="bar">
|
|
<div id="progress"></div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
static get properties() {
|
|
return {
|
|
progress: { type: Number },
|
|
indeterminate: { type: Boolean, reflect: true },
|
|
};
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
this.progress = 0;
|
|
this.indeterminate = false;
|
|
}
|
|
|
|
updated(changedProperties) {
|
|
if (changedProperties.has('progress') && !this.indeterminate) {
|
|
this._progressChanged(this.progress);
|
|
}
|
|
}
|
|
|
|
_progressChanged(value) {
|
|
value = Math.max(0, Math.min(100, value));
|
|
const progress = this.shadowRoot.querySelector('#progress');
|
|
progress.style.transform = `translateX(-${100 - value}%)`;
|
|
}
|
|
}
|
|
|
|
window.customElements.define('tp-progress-bar', TpProgressBar);
|