From b3c6dd4d60c18a97a6d83bf8bad5a41b8f0e2a82 Mon Sep 17 00:00:00 2001
From: iacore <noreply+gpg-stub@1a-insec.net>
Date: Tue, 13 Feb 2024 10:26:53 +0000
Subject: [PATCH] better gradient animation

---
 views/css/style.css     | 10 +++++++---
 views/css/style.css.map |  2 +-
 views/css/style.scss    | 17 ++++++++++++-----
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/views/css/style.css b/views/css/style.css
index a61a67a..34512bb 100644
--- a/views/css/style.css
+++ b/views/css/style.css
@@ -211,15 +211,19 @@ input[type=submit][hidden] {
   top: 0;
   height: 4px;
   margin-bottom: -4px;
+  animation: rolling-something 3s linear infinite;
+  background-image: repeating-linear-gradient(90deg, #118bee, transparent, transparent, #118bee, transparent, transparent, #118bee);
+  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+  opacity: 0;
 }
 #loading-indicator.htmx-request {
-  background-image: repeating-linear-gradient(90deg, #118bee, #fff, #118bee, #fff, #118bee);
-  animation: rolling-something 3s linear infinite;
+  opacity: 1;
+  transition-timing-function: linear;
 }
 
 @keyframes rolling-something {
   0% {
-    background-position-x: -33vw;
+    background-position-x: -50vw;
   }
   100% {
     background-position-x: 100vw;
diff --git a/views/css/style.css.map b/views/css/style.css.map
index 4103462..0fd67ba 100644
--- a/views/css/style.css.map
+++ b/views/css/style.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAiBA;EACE;;;AAGF;EACE;EACA;EAEA,kBAzBG;EA0BH,OAxBG;EA0BH;EACA,aAjBY;EAmBZ;;;AAIA;EADF;IAEI;;;;AAIJ;EACE,OArCK;EAsCL;;;AAGF;AACA;EACI;;;AAKJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBA1DG;EA2DH;;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;EAGE;EACA,eAvGc;EAwGd;EACA;;;AAGF;AAAA;EAEE;EACA,kBApHa;EAqHb,OAnHa;;;AAsHf;AAAA;EAEE,kBA1Ha;;;AA6Hf;EACE;EACA;;;AAGF;EACE;EACA,eA/Hc;EAgId;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQE,eApJc;EAqJd;EACA;EACA;EACA,aAvJY;EAwJZ;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE,aA3JY;;;AA8Jd;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME,kBA3LK;EA4LL;EACA,OA/LG;;;AAkML;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE;;AAEA;EACD;;AAID;EACE;;AAGF;EACE;;AAGF;EACE;EACA,kBArOW;EAsOX;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EAGE;EACA;;;AAGJ;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA,OAlRH;;AAuRC;EACE;EACA;;AAKF;EACE;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;EACA,kBArTD;EAsTC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EAEA;EACA;;AAEA;EACE;EACA;EACA;EACA,OA1UL;EA2UK;EACA;EACA;;AAEA;EACE,kBAjVG;;AAoVL;EACE;EACA;EACA;EACA;;;AAoBZ;EAEI;IACE;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EAEA;EAIA;EACA;;;AAGF;EACE;EACA;EACA;;;AAKA;AAAA;EACE;EACA,OAnaC;;AAuaD;AAAA;EACE,OA5ZgB;EA6ZhB,QA7ZgB;;AAgalB;AAAA;EACE,WAjagB;;AAoalB;AAAA;EACE,WAragB;;AAsahB;AAAA;EACE,WAxac;;AA8alB;AAAA;EACE,OA/agB;EAgbhB,QAhbgB;;AAmblB;AAAA;EACE,WApbgB;;AAublB;AAAA;EACE,WAxbgB;;AA0bhB;AAAA;EACE,WA3bc;;AAgcpB;AAAA;EACE;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBA3eI;EA4eJ,OA/eH;;AAkfC;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OA1fH;EA2fG;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;;AAKN;AAAA;EACE;EACA;EACA,eAvgBU;;AA0gBZ;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;EACA;EACA;;;AAOV;EACE,kBA7jBa;EA8jBb,eAzjBc;EA0jBd;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAEA;EACE;;AAEF;EACE;;AACA;EACE,OAlmBK;;AAwmBb;EACE;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE,OA9nBI;;AAioBN;EACE,OAnoBD;EAooBC;EACA;;AAKN;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA,OA/qBD;;AAirBC;EACE;EACA;EACA;EACA;EACA;;;AAMR;EACE;EAOA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;AACA;EACE;;;AAKN;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA,kBA7xBa;EA8xBb;;AAEA;EACE;EACA,OAjyBC;EAkyBD,kBAnyBW;EAoyBX;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE;;EAGF;AAAA;IAEE;;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;EACA;EAEA;EACA;;AAIA;EACE;;;AAKN;EACE,kBA90Ba;EA+0Bb;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA","file":"style.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAiBA;EACE;;;AAGF;EACE;EACA;EAEA,kBAzBG;EA0BH,OAxBG;EA0BH;EACA,aAjBY;EAmBZ;;;AAIA;EADF;IAEI;;;;AAIJ;EACE,OArCK;EAsCL;;;AAGF;AACA;EACI;;;AAKJ;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBA1DG;EA2DH;;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;EAGE;EACA,eAvGc;EAwGd;EACA;;;AAGF;AAAA;EAEE;EACA,kBApHa;EAqHb,OAnHa;;;AAsHf;AAAA;EAEE,kBA1Ha;;;AA6Hf;EACE;EACA;;;AAGF;EACE;EACA,eA/Hc;EAgId;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQE,eApJc;EAqJd;EACA;EACA;EACA,aAvJY;EAwJZ;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE,aA3JY;;;AA8Jd;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME,kBA3LK;EA4LL;EACA,OA/LG;;;AAkML;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;AAEA;EACE;;AAGF;EACE;;AAEA;EACD;;AAID;EACE;;AAGF;EACE;;AAGF;EACE;EACA,kBArOW;EAsOX;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EAEA;EACA;;AACA;EACE;EACA;;;AAIJ;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA,OAzRH;;AA8RC;EACE;EACA;;AAKF;EACE;;AAIJ;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;EACA,kBA5TD;EA6TC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EAEA;EACA;;AAEA;EACE;EACA;EACA;EACA,OAjVL;EAkVK;EACA;EACA;;AAEA;EACE,kBAxVG;;AA2VL;EACE;EACA;EACA;EACA;;;AAoBZ;EAEI;IACE;;;AAKN;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AACA;EAJF;IAKI;;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EAEA;EAIA;EACA;;;AAGF;EACE;EACA;EACA;;;AAKA;AAAA;EACE;EACA,OA1aC;;AA8aD;AAAA;EACE,OAnagB;EAoahB,QApagB;;AAualB;AAAA;EACE,WAxagB;;AA2alB;AAAA;EACE,WA5agB;;AA6ahB;AAAA;EACE,WA/ac;;AAqblB;AAAA;EACE,OAtbgB;EAubhB,QAvbgB;;AA0blB;AAAA;EACE,WA3bgB;;AA8blB;AAAA;EACE,WA/bgB;;AAichB;AAAA;EACE,WAlcc;;AAucpB;AAAA;EACE;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBAlfI;EAmfJ,OAtfH;;AAyfC;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OAjgBH;EAkgBG;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;;AAKN;AAAA;EACE;EACA;EACA,eA9gBU;;AAihBZ;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;EACA;EACA;;;AAOV;EACE,kBApkBa;EAqkBb,eAhkBc;EAikBd;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAEA;EACE;;AAEF;EACE;;AACA;EACE,OAzmBK;;AA+mBb;EACE;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE,OAroBI;;AAwoBN;EACE,OA1oBD;EA2oBC;EACA;;AAKN;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA,OAtrBD;;AAwrBC;EACE;EACA;EACA;EACA;EACA;;;AAMR;EACE;EAOA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;AACA;EACE;;;AAKN;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA,kBApyBa;EAqyBb;;AAEA;EACE;EACA,OAxyBC;EAyyBD,kBA1yBW;EA2yBX;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE;;EAGF;AAAA;IAEE;;;AAIJ;EACE;;AAEA;EACE;EACA;EACA;EACA;EAEA;EACA;;AAIA;EACE;;;AAKN;EACE,kBAr1Ba;EAs1Bb;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA","file":"style.css"}
\ No newline at end of file
diff --git a/views/css/style.scss b/views/css/style.scss
index a3829d1..f3bf7a0 100644
--- a/views/css/style.scss
+++ b/views/css/style.scss
@@ -233,6 +233,7 @@ input[type="submit"][hidden] {
   }
 }
 
+// https://stackoverflow.com/questions/63787241/css-how-to-create-an-infinitely-moving-repeating-linear-gradient/63787567#63787567
 #loading-indicator {
   z-index: 2;
   isolation: isolate;
@@ -240,16 +241,22 @@ input[type="submit"][hidden] {
   top: 0;
   height: 4px;
   margin-bottom: -4px;
+
+  // background-size: 200px auto;
+  animation: rolling-something 3s linear infinite;  
+  background-image: repeating-linear-gradient(90deg, $link, transparent, transparent, $link, transparent, transparent, $link); 
+
+  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+  opacity: 0;
   &.htmx-request {
-    // background: $link;
-    // https://stackoverflow.com/questions/63787241/css-how-to-create-an-infinitely-moving-repeating-linear-gradient/63787567#63787567
-    background-image: repeating-linear-gradient(90deg, $link, $fg, $link, $fg, $link); 
-    animation: rolling-something 3s linear infinite;
+    opacity: 1;
+    transition-timing-function: linear;
   }
 }
+
 @keyframes rolling-something {
   0% {
-    background-position-x: -33vw
+    background-position-x: -50vw
   }
   100% {
     background-position-x: 100vw