58 lines
2.1 KiB
JavaScript
58 lines
2.1 KiB
JavaScript
import {CustomElement, defineElement, Host, ShadowDOM, state, prop} from "../../packages/csx";
|
|
import loaderComponentShadowStyle from './svg-loader.shadow.scss';
|
|
|
|
// TODO configurability, like inverted and not with props...
|
|
|
|
@defineElement('svg-loader')
|
|
export class SvgLoader extends CustomElement{
|
|
// Constructor
|
|
constructor(){
|
|
super();
|
|
}
|
|
|
|
// Private properties
|
|
|
|
// Properties
|
|
@prop({reflect: true}) inverted;
|
|
@prop({reflect: true, attr: "inverted-color"}) invertedColor = "#000";
|
|
|
|
// Handlers
|
|
|
|
// CustomElement
|
|
render(){
|
|
return (
|
|
<Host>
|
|
<ShadowDOM>
|
|
<style>
|
|
{ loaderComponentShadowStyle }
|
|
</style>
|
|
|
|
<div class="loader-content">
|
|
<div class="spinner">
|
|
<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke={(this.inverted??false)!==false? this.invertedColor : "#F00"}>
|
|
<g fill="none" fill-rule="evenodd">
|
|
<g transform="translate(1 1)" stroke-width="2">
|
|
<circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
|
|
<path d="M36 18c0-9.94-8.06-18-18-18">
|
|
<animateTransform
|
|
attributeName="transform"
|
|
type="rotate"
|
|
from="0 18 18"
|
|
to="360 18 18"
|
|
dur="1s"
|
|
repeatCount="indefinite"/>
|
|
</path>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
<slot>
|
|
</slot>
|
|
</div>
|
|
</ShadowDOM>
|
|
</Host>
|
|
)
|
|
}
|
|
}
|