perf(nuxt): animate transform rather than width (#19073)

huang-julien · Feb 16, 2023 · 681cfa8 · 681cfa8
1 parent 7d0ecb5
commit 681cfa8
Showing 1 changed file with 4 additions and 2 deletions.
diff --git 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)