From c060aa81841e09ddaf811b03681f72101986f332 Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Thu, 22 Aug 2019 11:00:40 +0200
Subject: [PATCH] Add missing file
---
packages/common/vpu-spinner.js | 121 +++++++++++++++++++++++++++++++++
1 file changed, 121 insertions(+)
create mode 100644 packages/common/vpu-spinner.js
diff --git a/packages/common/vpu-spinner.js b/packages/common/vpu-spinner.js
new file mode 100644
index 00000000..32ae449d
--- /dev/null
+++ b/packages/common/vpu-spinner.js
@@ -0,0 +1,121 @@
+// Note: This doesn't have a lit-element dependency on purpose, so it can be loaded faster before
+// other web components (assuming it's not bundled)
+
+class Spinner extends HTMLElement {
+
+ constructor() {
+ super();
+ let shadowRoot = this.attachShadow({mode: 'open'});
+ shadowRoot.innerHTML = `
+<style>
+:host {
+ display: block;
+}
+#all-spinner-tuglogo {
+ width:130px;
+ height:130px;
+ position:relative;
+ background-color:transparent;
+ margin:0 auto;
+}
+
+.all-spinner-tuglogo-box {
+ width:20%;
+ height:20%;
+ background-color:#e4154b;
+ position:absolute;
+ top:50%;
+ left:50%;
+ animation-duration: 1.6s;
+ animation-direction:alternate;
+ animation-iteration-count:infinite;
+ animation-fill-mode:both;
+ animation-timing-function:ease;
+ transition: transform 0.5s, background-color 0.2s 0.5s;
+}
+
+#all-spinner-tuglogo-box-1 {
+ animation-name: box1;
+ transform:translateX(-160%) translateY(-50%);
+}
+
+#all-spinner-tuglogo-box-2 {
+ transform-origin:0 0;
+ animation-name: box2;
+transform:scale(1) translateX(-50%) translateY(-50%);
+}
+
+#all-spinner-tuglogo-box-3 {
+
+ animation-name: box3;
+ animation-delay:0.3s;
+ transform:translateX(60%) translateY(-50%); visibility:visible;
+}
+
+#all-spinner-tuglogo-box-4 {
+
+ animation-name: box4;
+ animation-delay:0.1s;
+transform:translateX(0%) translateY(-100%); visibility:visible;
+}
+
+#all-spinner-tuglogo-box-5 {
+
+ animation-name: box5;
+ animation-delay:0.2s;
+transform:translateX(-100%) translateY(0%); visibility:visible;
+}
+
+@keyframes box1 {
+ 0% { transform:translateX(-50%) translateY(-50%); visibility:hidden; }
+ 50% { transform:translateX(-50%) translateY(-50%); visibility:hidden; }
+ 70% { transform:translateX(-170%) translateY(-50%); visibility:visible;}
+ 80% { transform:translateX(-160%) translateY(-50%); visibility:visible;}
+ 100% { transform:translateX(-160%) translateY(-50%); visibility:visible;}
+}
+
+@keyframes box2 {
+ 0% { transform:scale(0) translateX(-50%) translateY(-50%);}
+ 5% { transform:scale(0) translateX(-50%) translateY(-50%);}
+ 30% { transform:scale(1.2) translateX(-50%) translateY(-50%);}
+ 35% { transform:scale(1) translateX(-50%) translateY(-50%);}
+ 100% { transform:scale(1) translateX(-50%) translateY(-50%);}
+
+}
+
+@keyframes box3 {
+ 0% { transform:translateX(-50%) translateY(-50%); visibility:hidden; }
+ 50% { transform:translateX(-50%) translateY(-50%); visibility:hidden; }
+ 70% { transform:translateX(70%) translateY(-50%); visibility:visible;}
+ 80% { transform:translateX(60%) translateY(-50%); visibility:visible;}
+ 100% { transform:translateX(60%) translateY(-50%); visibility:visible;}
+}
+
+@keyframes box4 {
+ 0% { transform:translateX(-50%) translateY(-50%); visibility:hidden; }
+ 50% { transform:translateX(-50%) translateY(-50%); visibility:hidden; }
+ 70% { transform:translateX(10%) translateY(-110%); visibility:visible;}
+ 80% { transform:translateX(0%) translateY(-100%); visibility:visible;}
+ 100% { transform:translateX(0%) translateY(-100%); visibility:visible;}
+}
+@keyframes box5 {
+ 0% { transform:translateX(-50%) translateY(-50%); visibility:hidden; }
+ 50% { transform:translateX(-50%) translateY(-50%); visibility:hidden; }
+ 70% { transform:translateX(-110%) translateY(10%); visibility:visible;}
+ 80% { transform:translateX(-100%) translateY(0%); visibility:visible;}
+ 100% { transform:translateX(-100%) translateY(0%); visibility:visible;}
+}
+</style>
+
+<div id="all-spinner-tuglogo">
+ <div id="all-spinner-tuglogo-box-1" class="all-spinner-tuglogo-box"></div>
+ <div id="all-spinner-tuglogo-box-2" class="all-spinner-tuglogo-box"></div>
+ <div id="all-spinner-tuglogo-box-3" class="all-spinner-tuglogo-box"></div>
+ <div id="all-spinner-tuglogo-box-4" class="all-spinner-tuglogo-box"></div>
+ <div id="all-spinner-tuglogo-box-5" class="all-spinner-tuglogo-box"></div>
+</div>`;
+ }
+}
+
+if (!customElements.get('vpu-spinner'))
+ customElements.define('vpu-spinner', Spinner);
--
GitLab