[yew-devel] [PATCH proxmox-yew-widget-toolkit-assets] infinite progress bar: use purely transforms for the animation

[yew-devel] [PATCH proxmox-yew-widget-toolkit-assets] infinite progress bar: use purely transforms for the animation

[Dominik Csapak]

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

[yew-devel] applied: [PATCH proxmox-yew-widget-toolkit-assets] infinite progress bar: use purely transforms for the animation

[Dietmar Maurer]

[-- Attachment #1.1: Type: text/plain, Size: 7 bytes --]

applied

[-- Attachment #1.2: Type: text/html, Size: 319 bytes --]

[-- Attachment #2: Type: text/plain, Size: 160 bytes --]

_______________________________________________
yew-devel mailing list
yew-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel