[pve-devel] [PATCH widget-toolkit 1/3] css: override css classes for extjs spinner with our svg spinner

[Shannon Sterz]

so it does not look blurry

Signed-off-by: Shannon Sterz <s.sterz at proxmox.com>
---
 src/css/ext6-pmx.css   | 13 +++++++++++++
 src/images/Makefile    |  1 +
 src/images/spinner.svg | 24 ++++++++++++++++++++++++
 3 files changed, 38 insertions(+)
 create mode 100644 src/images/spinner.svg

diff --git a/src/css/ext6-pmx.css b/src/css/ext6-pmx.css
index 303dd43..a0217f3 100644
--- a/src/css/ext6-pmx.css
+++ b/src/css/ext6-pmx.css
@@ -220,6 +220,19 @@ div.right-aligned {
     background-image: url(../images/openid-icon-100x100.png);
 }
 
+/* fix up extjs spinners with our svg spinner */
+.x-treelist-item-loading .x-treelist-item-icon,
+.x-treelist-nav .x-treelist-item-loading .x-treelist-item-icon,
+.x-grid-tree-loading .x-tree-icon {
+    background-image: url(../images/spinner.svg);
+    background-size: 16px;
+}
+
+.x-mask-msg-text {
+    background-image: url(../images/spinner.svg);
+    background-size: 21px;
+}
+
 /* change font for config panel back to fontawesome */
 .x-treelist-item-expanded > * > * > .x-treelist-item-expander::after,
 .x-treelist-item-expander::after {
diff --git a/src/images/Makefile b/src/images/Makefile
index 61395b4..497a1e2 100644
--- a/src/images/Makefile
+++ b/src/images/Makefile
@@ -6,6 +6,7 @@ IMAGES=pmx-clear-trigger.png		\
        icon-ram.svg			\
        debian-swirl-openlogo.svg	\
        proxmox-symbol-x.svg		\
+       spinner.svg			\
 
 all:
 
diff --git a/src/images/spinner.svg b/src/images/spinner.svg
new file mode 100644
index 0000000..3d2a63c
--- /dev/null
+++ b/src/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