Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-22 05:35:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(nuxt): allow disabling color for <NuxtLoadingIndicator> (#18432)

Browse Source
This commit is contained in:
Kareem Dabbeet 2023-01-22 02:15:32 +03:00 committed by GitHub
parent 98d292ae85
commit ea9812a559
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/content/1.docs/3.api/2.components/5.nuxt-loading-indicator.md
View File

@ -29,7 +29,7 @@ You can pass custom HTML or components through the loading indicator's default s
## Props ## 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`). - **height**: Height of the loading bar, in pixels (default `3`).
- **duration**: Duration of the loading bar, in milliseconds (default `2000`). - **duration**: Duration of the loading bar, in milliseconds (default `2000`).
- **throttle**: Throttle the appearing and hiding, in milliseconds (default `200`). - **throttle**: Throttle the appearing and hiding, in milliseconds (default `200`).

4
packages/nuxt/src/app/components/nuxt-loading-indicator.ts
View File

@ -17,7 +17,7 @@ export default defineComponent({
default: 3 default: 3
}, },
color: { color: {
type: String, type: [String, Boolean],
default: 'repeating-linear-gradient(to right,#00dc82 0%,#34cdfe 50%,#0047e1 100%)' default: 'repeating-linear-gradient(to right,#00dc82 0%,#34cdfe 50%,#0047e1 100%)'
} }
}, },
@ -45,7 +45,7 @@ export default defineComponent({
width: `${indicator.progress.value}%`, width: `${indicator.progress.value}%`,
height: `${props.height}px`, height: `${props.height}px`,
opacity: indicator.isLoading.value ? 1 : 0, opacity: indicator.isLoading.value ? 1 : 0,
background: props.color, background: props.color || undefined,
backgroundSize: `${(100 / indicator.progress.value) * 100}% auto`, backgroundSize: `${(100 / indicator.progress.value) * 100}% auto`,
transition: 'width 0.1s, height 0.4s, opacity 0.4s', transition: 'width 0.1s, height 0.4s, opacity 0.4s',
zIndex: 999999 zIndex: 999999