mirror of
https://github.com/nuxt/nuxt.git
synced 2024-12-05 03:47:12 +00:00
2.2 KiB
2.2 KiB
title | description | links | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
useLoadingIndicator | This composable gives you access to the loading state of the app page. |
|
Description
A composable which returns the loading state of the page. Used by <NuxtLoadingIndicator>
and controllable.
It hooks into page:loading:start
and page:loading:end
to change its state.
Parameters
duration
: Duration of the loading bar, in milliseconds (default2000
).throttle
: Throttle the appearing and hiding, in milliseconds (default200
).estimatedProgress
: By default Nuxt will back off as it approaches 100%. You can provide a custom function to customize the progress estimation, which is a function that receives the duration of the loading bar (above) and the elapsed time. It should return a value between 0 and 100.
Properties
isLoading
- type:
Ref<boolean>
- description: The loading state
error
- type:
Ref<boolean>
- description: The error state
progress
- type:
Ref<number>
- description: The progress state. From
0
to100
.
Methods
start()
Set isLoading
to true and start to increase the progress
value.
finish()
Set the progress
value to 100
, stop all timers and intervals then reset the loading state 500
ms later. finish
accepts a { force: true }
option to skip the interval before the state is reset, and { error: true }
to change the loading bar color and set the error property to true.
clear()
Used by finish()
. Clear all timers and intervals used by the composable.
Example
<script setup lang="ts">
const { progress, isLoading, start, finish, clear } = useLoadingIndicator({
duration: 2000,
throttle: 200,
// This is how progress is calculated by default
estimatedProgress: (duration, elapsed) => (2 / Math.PI * 100) * Math.atan(elapsed / duration * 100 / 50)
})
</script>