From c0a8809373cde3c1ee010000a6f82eba54394ad6 Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Thu, 14 Jul 2022 15:37:31 +0200
Subject: [PATCH] Make the loading spinner style generic
We were using the TU Graz one until now. Instead move
to something that matches DBP somewhat..
---
packages/common/src/spinner.js | 118 +++++++++++----------------------
1 file changed, 40 insertions(+), 78 deletions(-)
diff --git a/packages/common/src/spinner.js b/packages/common/src/spinner.js
index 3142dd04..74535a58 100644
--- a/packages/common/src/spinner.js
+++ b/packages/common/src/spinner.js
@@ -8,110 +8,72 @@ export class Spinner extends HTMLElement {
shadowRoot.innerHTML = `
<style>
:host {
- display: block;
+ display: inline-block;
}
-#all-spinner-tuglogo {
- width:130px;
+
+#all-spinner {
+ width:130px;
height:130px;
- position:relative;
- background-color:transparent;
- margin:0 auto;
+ position:relative;
+ background-color:transparent;
+ margin:0 auto;
}
-.all-spinner-tuglogo-box {
- width:20%;
- height:20%;
- background-color:var(--dbp-accent-surface);
- 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-box {
+ width:50%;
+ height:50%;
+ /* Use a fallback color, in case this is used standalone */
+ background-color:var(--dbp-accent-surface, #9E1E4D);
+ position:absolute;
+ top:50%;
+ left:50%;
+ animation-duration: 1.6s;
+ animation-direction:alternate-reverse;
+ animation-iteration-count:infinite;
}
-#all-spinner-tuglogo-box-1 {
+#box-1 {
animation-name: box1;
- transform:translateX(-160%) translateY(-50%);
}
-#all-spinner-tuglogo-box-2 {
- transform-origin:0 0;
+#box-2 {
animation-name: box2;
-transform:scale(1) translateX(-50%) translateY(-50%);
}
-#all-spinner-tuglogo-box-3 {
-
+#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;}
+ 0% { transform:translateX(-50%) translateY(-50%) rotate(45deg); opacity: 0.5; }
+ 30% { transform:translateX(-70%) translateY(-50%) rotate(45deg); opacity: 0.4; }
+ 70% { transform:translateX(-70%) translateY(-50%) rotate(45deg); opacity: 0.5; }
+ 90% { transform:translateX(-70%) translateY(-50%) rotate(45deg); opacity: 0.4; }
+ 100% { transform:translateX(-70%) translateY(-50%) rotate(45deg); opacity: 0.5;}
}
@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%);}
+ 0% { transform:translateX(-50%) translateY(-50%) rotate(45deg); opacity: 0.6; }
+ 30% { transform:translateX(-50%) translateY(-50%) rotate(45deg); opacity: 0.7;}
+ 70% { transform:translateX(-50%) translateY(-50%) rotate(45deg); opacity: 0.6;}
+ 90% { transform:translateX(-50%) translateY(-50%) rotate(45deg); opacity: 0.7;}
+ 100% { transform:translateX(-50%) translateY(-50%) rotate(45deg); opacity: 0.6;}
}
@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;}
+ 0% { transform:translateX(-50%) translateY(-50%) rotate(45deg);opacity: 0.9; }
+ 30% { transform:translateX(-30%) translateY(-50%) rotate(45deg); opacity: 0.7;}
+ 70% { transform:translateX(-30%) translateY(-50%) rotate(45deg); opacity: 0.9;}
+ 90% { transform:translateX(-30%) translateY(-50%) rotate(45deg); opacity: 0.7;}
+ 100% { transform:translateX(-30%) translateY(-50%) rotate(45deg); opacity: 0.9;}
}
</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 id="all-spinner">
+ <div id="box-1" class="all-box"></div>
+ <div id="box-2" class="all-box"></div>
+ <div id="box-3" class="all-box"></div>
</div>`;
}
}
--
GitLab