* [yew-devel] [PATCH proxmox-yew-widget-toolkit-assets] infinite progress bar: use purely transforms for the animation
@ 2025-09-29 14:24 Dominik Csapak
2025-10-03 5:44 ` [yew-devel] applied: " Dietmar Maurer
0 siblings, 1 reply; 2+ messages in thread
From: Dominik Csapak @ 2025-09-29 14:24 UTC (permalink / raw)
To: yew-devel
this has the advantage that it works even when the wasm/js code blocks
the browser, the animation can still continue. When using `left`, that
seemingly triggers a reflow/layout and can't be done until wasm/js is
done.
Visually there should be no difference.
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
scss/_progress.scss | 7 ++++---
1 file changed, 4 insertions(+), 3 deletions(-)
diff --git a/scss/_progress.scss b/scss/_progress.scss
index a2da0ea..7f619d8 100644
--- a/scss/_progress.scss
+++ b/scss/_progress.scss
@@ -17,11 +17,11 @@
@keyframes infinite-progress {
from {
- left: 0;
+ transform: translateX(-40%) scaleX(0.2) ;
}
to {
- left: calc(100% - 20%);
+ transform: translateX(40%) scaleX(0.2) ;
}
}
@@ -29,8 +29,9 @@
position: absolute;
top: 0;
bottom: 0;
- width: 20%;
+ width: 100%;
left: 0;
+ transform: translateX(-40%) scaleX(0.2);
background: var(--pwt-accent-color-background);
animation-duration: 2s;
animation-name: infinite-progress;
--
2.47.3
_______________________________________________
yew-devel mailing list
yew-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel
^ permalink raw reply [flat|nested] 2+ messages in thread
end of thread, other threads:[~2025-10-03 5:44 UTC | newest]
Thread overview: 2+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2025-09-29 14:24 [yew-devel] [PATCH proxmox-yew-widget-toolkit-assets] infinite progress bar: use purely transforms for the animation Dominik Csapak
2025-10-03 5:44 ` [yew-devel] applied: " Dietmar Maurer
This is an external index of several public inboxes,
see mirroring instructions on how to clone and mirror
all data and code used by this external index.