From 681cfa83fde4baf1d66a51e30113cc635df86210 Mon Sep 17 00:00:00 2001 From: Nathan Chase Date: Thu, 16 Feb 2023 08:04:09 -0500 Subject: [PATCH] perf(nuxt): animate transform rather than width (#19073) --- packages/nuxt/src/app/components/nuxt-loading-indicator.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/nuxt/src/app/components/nuxt-loading-indicator.ts b/packages/nuxt/src/app/components/nuxt-loading-indicator.ts index 0de19aed37..fb112b451e 100644 --- a/packages/nuxt/src/app/components/nuxt-loading-indicator.ts +++ b/packages/nuxt/src/app/components/nuxt-loading-indicator.ts @@ -42,12 +42,14 @@ export default defineComponent({ right: 0, left: 0, pointerEvents: 'none', - width: `${indicator.progress.value}%`, + width: 'auto', height: `${props.height}px`, opacity: indicator.isLoading.value ? 1 : 0, background: props.color || undefined, backgroundSize: `${(100 / indicator.progress.value) * 100}% auto`, - transition: 'width 0.1s, height 0.4s, opacity 0.4s', + transform: `scaleX(${indicator.progress.value}%)`, + transformOrigin: 'left', + transition: 'transform 0.1s, height 0.4s, opacity 0.4s', zIndex: 999999 } }, slots)