84 lines
2.6 KiB
JavaScript
84 lines
2.6 KiB
JavaScript
/**
|
|
* ProgressBar Component
|
|
* <progress-bar value="50"></progress-bar>
|
|
*
|
|
* This is a element with a Qt Styled Progressbar!
|
|
*
|
|
* utml 2025 - Utility Tag Markup Layer
|
|
*/
|
|
|
|
class ProgressBar extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
|
|
const shadow = this.attachShadow({mode: 'open'});
|
|
|
|
// Outer container
|
|
const container = document.createElement('div');
|
|
container.style.width = '300px';
|
|
container.style.height = '25px';
|
|
container.style.background = '#ddd';
|
|
container.style.borderRadius = '4px';
|
|
container.style.overflow = 'hidden';
|
|
container.style.position = 'relative';
|
|
|
|
// Inner value bar
|
|
const valueBar = document.createElement('div');
|
|
valueBar.style.width = '0%';
|
|
valueBar.style.height = '100%';
|
|
valueBar.style.backgroundColor = '#4a90e2';
|
|
valueBar.style.backgroundImage = `
|
|
linear-gradient(
|
|
45deg,
|
|
rgba(255,255,255,0.3) 25%,
|
|
rgba(255,255,255,0) 25%,
|
|
rgba(255,255,255,0) 50%,
|
|
rgba(255,255,255,0.3) 50%,
|
|
rgba(255,255,255,0.3) 75%,
|
|
rgba(255,255,255,0) 75%,
|
|
rgba(255,255,255,0) 100%
|
|
)
|
|
`;
|
|
valueBar.style.backgroundSize = '40px 40px';
|
|
valueBar.style.animation = 'barberpole 1s linear infinite';
|
|
|
|
valueBar.style.transition = 'width 0.3s ease';
|
|
container.appendChild(valueBar);
|
|
|
|
// Add styles
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
@keyframes barberpole {
|
|
from { background-position: 0 0; }
|
|
to { background-position: 40px 0; } /* only horizontal movement */
|
|
}
|
|
`;
|
|
shadow.appendChild(style);
|
|
shadow.appendChild(container);
|
|
|
|
this._valueBar = valueBar;
|
|
}
|
|
|
|
static get observedAttributes() { return ['value']; }
|
|
|
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
if (name === 'value') {
|
|
const val = Math.min(100, Math.max(0, Number(newValue)));
|
|
this._valueBar.style.width = val + '%';
|
|
|
|
// Start/stop barber pole animation based on value
|
|
if (val < 100) {
|
|
this._valueBar.style.animation = 'barberpole 1s linear infinite';
|
|
} else {
|
|
this._valueBar.style.animation = 'none'; // stop animation
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
get value() { return Number(this.getAttribute('value')) || 0; }
|
|
set value(val) { this.setAttribute('value', val); }
|
|
}
|
|
|
|
// Define custom element
|
|
customElements.define('progress-bar', ProgressBar); |