From: Dominik Csapak <d.csapak@proxmox.com>
To: yew-devel@lists.proxmox.com
Subject: [yew-devel] [PATCH proxmox-yew-widget-toolkit-assets] infinite progress bar: use purely transforms for the animation
Date: Mon, 29 Sep 2025 16:24:37 +0200 [thread overview]
Message-ID: <20250929142443.3460960-1-d.csapak@proxmox.com> (raw)
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
next reply other threads:[~2025-09-29 14:25 UTC|newest]
Thread overview: 2+ messages / expand[flat|nested] mbox.gz Atom feed top
2025-09-29 14:24 Dominik Csapak [this message]
2025-10-03 5:44 ` [yew-devel] applied: " Dietmar Maurer
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=20250929142443.3460960-1-d.csapak@proxmox.com \
--to=d.csapak@proxmox.com \
--cc=yew-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