diff --git a/docs/content/1.docs/3.api/2.components/5.nuxt-loading-indicator.md b/docs/content/1.docs/3.api/2.components/5.nuxt-loading-indicator.md
index 35d9e33544..13fe8a104b 100644
--- a/docs/content/1.docs/3.api/2.components/5.nuxt-loading-indicator.md
+++ b/docs/content/1.docs/3.api/2.components/5.nuxt-loading-indicator.md
@@ -29,7 +29,7 @@ You can pass custom HTML or components through the loading indicator's default s
 
 ## Props
 
-- **color**: The color of the loading bar.
+- **color**: The color of the loading bar. It can be set to `false` to turn off explicit color styling.
 - **height**: Height of the loading bar, in pixels (default `3`).
 - **duration**: Duration of the loading bar, in milliseconds (default `2000`).
 - **throttle**: Throttle the appearing and hiding, in milliseconds (default `200`).
diff --git a/packages/nuxt/src/app/components/nuxt-loading-indicator.ts b/packages/nuxt/src/app/components/nuxt-loading-indicator.ts
index e172ebbcdd..8ab1c9a04c 100644
--- a/packages/nuxt/src/app/components/nuxt-loading-indicator.ts
+++ b/packages/nuxt/src/app/components/nuxt-loading-indicator.ts
@@ -17,7 +17,7 @@ export default defineComponent({
       default: 3
     },
     color: {
-      type: String,
+      type: [String, Boolean],
       default: 'repeating-linear-gradient(to right,#00dc82 0%,#34cdfe 50%,#0047e1 100%)'
     }
   },
@@ -45,7 +45,7 @@ export default defineComponent({
         width: `${indicator.progress.value}%`,
         height: `${props.height}px`,
         opacity: indicator.isLoading.value ? 1 : 0,
-        background: props.color,
+        background: props.color || undefined,
         backgroundSize: `${(100 / indicator.progress.value) * 100}% auto`,
         transition: 'width 0.1s, height 0.4s, opacity 0.4s',
         zIndex: 999999