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);
+ }
+ }
+ `
+ ];
+ }
+}