2 lines
1.2 KiB
JavaScript
2 lines
1.2 KiB
JavaScript
|
import{html as e,css as a,Component as o,styleMap as r}from"wkit";class n extends o{static props={progress:"num!0",duration:3e3,value:{type:Boolean,observer(t){this.duration>0?t&&requestAnimationFrame(this.#i.bind(this)):t?this.setAttribute("loading",""):this.removeAttribute("loading")}}};static styles=[a`:host{position:fixed;top:0;left:0;z-index:65535;display:flex;width:100vw;height:0}.thumb{width:0;height:var(--wc-loading-height, 2px);background:var(--wc-loading-background, var(--color-teal-1));box-shadow:0 0 5px var(--wc-loading-background, var(--color-teal-1));will-change:width;transition:width .1s linear}:host([loading]) .thumb{width:25% !important;animation:autoplay 1s infinite ease-in-out}@keyframes autoplay{from,to{transform:translateX(0)}50%{transform:translateX(calc(100vw - 100%))}}`];#t;#i(t){this.#t===void 0&&(this.#t=t);let i=t-this.#t,s=~~(i/(this.duration/100));if(s!==this.progress&&(this.progress=s),i>this.duration){this.progress=0,this.#t=void 0,this.value=!1,this.$emit("input"),this.$emit("change");return}requestAnimationFrame(this.#i.bind(this))}render(){let t=r({width:this.progress+"%"});return e` <span class="thumb" style=${t}></span> `}}n.reg("loading");
|