diff --git a/src/LoadUIElements.ts b/src/LoadUIElements.ts index 0a75495a..aeaa70b2 100644 --- a/src/LoadUIElements.ts +++ b/src/LoadUIElements.ts @@ -20,6 +20,7 @@ import "./components/repositorybanner/PluginNotLoaded"; import "./components/HacsBody"; import "./components/HacsLink"; import "./components/HacsProgressbar"; +import "./components/MultiSpinner"; import "./misc/HacsMenu"; import "./misc/CustomRepositories"; diff --git a/src/components/HacsLink.ts b/src/components/HacsLink.ts index 2f0e1b02..9fee1e81 100644 --- a/src/components/HacsLink.ts +++ b/src/components/HacsLink.ts @@ -11,17 +11,24 @@ import { @customElement("hacs-link") export class HacsLink extends LitElement { @property() private url!: string; - @property() private ext: boolean = true; protected render(): TemplateResult | void { - return html` + if (this.url.includes("http")) { + return html` `; + } else { + return html` + + + + `; + } } static get styles(): CSSResultArray { diff --git a/src/components/MultiSpinner.ts b/src/components/MultiSpinner.ts new file mode 100644 index 00000000..cb30dafe --- /dev/null +++ b/src/components/MultiSpinner.ts @@ -0,0 +1,152 @@ +import { + LitElement, + customElement, + CSSResultArray, + css, + TemplateResult, + html, + property +} from "lit-element"; + +@customElement("multi-spinner") +export class Spinner extends LitElement { + @property() public primary: string = "#faa179"; + @property() public secondary: string = "black"; + @property() public active: boolean = false; + + protected render(): TemplateResult | void { + if (!this.active) return html``; + return html` + + + + + + + + + + + + + + + + + + + + + + + + + `; + } + + static get styles(): CSSResultArray { + return [ + css` + .stroke { + stroke-dasharray: 200; + } + .stroke30 { + stroke-dashoffset: 50; + } + .stroke25 { + stroke-dashoffset: 75; + } + .stroke20 { + stroke-dashoffset: 100; + } + .stroke15 { + stroke-dashoffset: 125; + } + .stroke10 { + stroke-dashoffset: 150; + } + .stroke5 { + stroke-dashoffset: 175; + } + + .spin { + position: absolute; + z-index: 1337; + width: auto; + } + + .spinner13 { + animation: rotate 1.3s linear infinite; + -webkit-animation: rotate 1.3s linear infinite; + -moz-animation: rotate 1.3s linear infinite; + } + + .reversespinner13 { + animation: reverserotate 1.3s linear infinite; + -webkit-animation: reverserotate 1.3s linear infinite; + -moz-animation: reverserotate 1.3s linear infinite; + } + + .spinner14 { + animation: rotate 1.4s linear infinite; + -webkit-animation: rotate 1.4s linear infinite; + -moz-animation: rotate 1.4s linear infinite; + } + + .reversespinner14 { + animation: reverserotate 1.4s linear infinite; + -webkit-animation: reverserotate 1.4s linear infinite; + -moz-animation: reverserotate 1.4s linear infinite; + } + + .spinner15 { + animation: rotate 1.5s linear infinite; + -webkit-animation: rotate 1.5s linear infinite; + -moz-animation: rotate 1.5s linear infinite; + } + + .reversespinner15 { + animation: reverserotate 1.5s linear infinite; + -webkit-animation: reverserotate 1.5s linear infinite; + -moz-animation: reverserotate 1.5s linear infinite; + } + + @keyframes rotate { + to { + transform: rotate(360deg); + } + } + + @-webkit-keyframes rotate { + to { + -webkit-transform: rotate(360deg); + } + } + + @-moz-keyframes rotate { + to { + transform: rotate(360deg); + } + } + + @keyframes reverserotate { + to { + transform: rotate(-360deg); + } + } + + @-webkit-keyframes reverserotate { + to { + -webkit-transform: rotate(-360deg); + } + } + + @-moz-keyframes reverserotate { + to { + transform: rotate(-360deg); + } + } + ` + ]; + } +}