From 681cfa83fde4baf1d66a51e30113cc635df86210 Mon Sep 17 00:00:00 2001
From: Nathan Chase <nathan@nathanchase.com>
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 0de19aed373..fb112b451e6 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)