From: Shannon Sterz <s.sterz@proxmox.com>
To: pve-devel@lists.proxmox.com
Subject: [pve-devel] [PATCH widget-toolkit 1/3] css: override css classes for extjs spinner with our svg spinner
Date: Fri, 29 Aug 2025 16:12:14 +0200 [thread overview]
Message-ID: <20250829141219.290626-3-s.sterz@proxmox.com> (raw)
In-Reply-To: <20250829141219.290626-2-s.sterz@proxmox.com>
so it does not look blurry
Signed-off-by: Shannon Sterz <s.sterz@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
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
next prev parent reply other threads:[~2025-08-29 14:13 UTC|newest]
Thread overview: 8+ messages / expand[flat|nested] mbox.gz Atom feed top
2025-08-29 14:12 [pve-devel] [PATCH manager/pmg-gui/proxmox-backup/widget-toolkit 0/7] blurry icons follow-up Shannon Sterz
2025-08-29 14:12 ` Shannon Sterz [this message]
2025-08-29 14:12 ` [pve-devel] [PATCH widget-toolkit 2/3] images/css: replace pmx-clear-trigger.png with an svg Shannon Sterz
2025-08-29 14:12 ` [pve-devel] [PATCH widget-toolkit 3/3] images/css: replace openid icon with an svg version Shannon Sterz
2025-08-29 14:12 ` [pve-devel] [PATCH manager 1/2] ui: remove unused pve-itype-icon-itype class Shannon Sterz
2025-08-29 14:12 ` [pve-devel] [PATCH manager 2/2] ui: use spinner from proxmox-widget-toolkit instead of adding it here Shannon Sterz
2025-08-29 14:12 ` [pve-devel] [PATCH proxmox-backup 1/1] css: replace blurry extjs spinner with widget-toolkit's svg version Shannon Sterz
2025-08-29 14:12 ` [pve-devel] [PATCH pmg-gui " Shannon Sterz
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=20250829141219.290626-3-s.sterz@proxmox.com \
--to=s.sterz@proxmox.com \
--cc=pve-devel@lists.proxmox.com \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox