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 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.