[pve-devel] [PATCH manager 3/9] ui: replace the gif spinner from extjs with an svg

[Shannon Sterz <s.sterz@proxmox.com>]

the current spinner gif is quite blurry on modern hardware so use an
svg based spinner instead.

note that by including the css animation in the svg itself, the
animation does not appear to restart when extjs re-renders a table.
this, at least in firefox 128, lead to jerky looking animation when
using font awesome's spinner with the `fa-spin` class. by creating our
own svg, we can also make it look more like the extjs version.

this does not impact the spinners used by extjs's load mask, as that
would require adapting extjs's code itself.

Signed-off-by: Shannon Sterz <s.sterz@proxmox.com>
---
 www/css/ext6-pve.css   |  2 +-
 www/images/Makefile    |  4 +++-
 www/images/spinner.svg | 24 ++++++++++++++++++++++++
 3 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 www/images/spinner.svg

diff --git a/www/css/ext6-pve.css b/www/css/ext6-pve.css
index 5e77698e9..0b92041df 100644
--- a/www/css/ext6-pve.css
+++ b/www/css/ext6-pve.css
@@ -92,7 +92,7 @@
 /* loading in task list */
 .x-grid-row-loading {
     background: no-repeat center center;
-    background-image: url(../ext6/theme-crisp/resources/images/loadmask/loading.gif);
+    background-image: url(../images/spinner.svg);
 }
 
 /* for font-awesome colors */
diff --git a/www/images/Makefile b/www/images/Makefile
index 65ead9789..7c9e12cb0 100644
--- a/www/images/Makefile
+++ b/www/images/Makefile
@@ -18,6 +18,8 @@ all:
 # are self made (sources as .xcf)
 # icon-swap, icon-keyboard, icon-network, icon-usb, icon-cloud
 # come from fontawesome (respective fa-refresh, fa-keyboard-o, fa-exchange, fa-usb, fa-ellipsis-h, fa-cloud)
+# spinner is self made
+
 # icon-serial is a modified version of
 # https://commons.wikimedia.org/wiki/File:DE9_Diagram.svg
 # (public domain)
@@ -80,7 +82,7 @@ IMAGES = $(GNOME_IMAGES)	\
 	icon-cpu.svg		\
 	icon-memory.svg		\
 	icon-cd-drive.svg	\
-
+	spinner.svg		\
 
 icon-sdn.svg: icon-sdn.dot
 	fdp -Tsvg $< > $@
diff --git a/www/images/spinner.svg b/www/images/spinner.svg
new file mode 100644
index 000000000..a3fccfc4d
--- /dev/null
+++ b/www/images/spinner.svg
@@ -0,0 +1,24 @@
+<svg version="1.1" viewBox="-13 -13 26 26" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<style>
+        @keyframes frames {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
+        .spinner { animation: frames 1.2s steps(12, jump-start) infinite; }
+</style>
+<g stroke-linecap="round" stroke-width="2">
+<path class="spinner" id="a" d="m0 -8 0,4"/>
+<use transform="rotate(30)" xlink:href="#a" stroke="#eaeaea"/>
+<use transform="rotate(60)" xlink:href="#a" stroke="#d4d4d4"/>
+<use transform="rotate(90)" xlink:href="#a" stroke="#bfbfbf"/>
+<use transform="rotate(120)" xlink:href="#a" stroke="#aaaaaa"/>
+<use transform="rotate(150)" xlink:href="#a" stroke="#959595"/>
+<use transform="rotate(180)" xlink:href="#a" stroke="#808080"/>
+<use transform="rotate(210)" xlink:href="#a" stroke="#6a6a6a"/>
+<use transform="rotate(240)" xlink:href="#a" stroke="#555555"/>
+<use transform="rotate(270)" xlink:href="#a" stroke="#404040"/>
+<use transform="rotate(300)" xlink:href="#a" stroke="#2a2a2a"/>
+<use transform="rotate(330)" xlink:href="#a" stroke="#151515"/>
+<use transform="rotate(360)" xlink:href="#a" stroke="#000000"/>
+</g>
+</svg>
-- 
2.47.2



_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel