/
nuxt-loading-indicator.ts
54 lines (51 loc) · 1.35 KB
/
nuxt-loading-indicator.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
import { defineComponent, h } from 'vue'
import { useLoadingIndicator } from '#app/composables/loading-indicator'
export default defineComponent({
name: 'NuxtLoadingIndicator',
props: {
throttle: {
type: Number,
default: 200
},
duration: {
type: Number,
default: 2000
},
height: {
type: Number,
default: 3
},
color: {
type: [String, Boolean],
default: 'repeating-linear-gradient(to right,#00dc82 0%,#34cdfe 50%,#0047e1 100%)'
}
},
setup (props, { slots, expose }) {
const { progress, isLoading, start, finish, clear } = useLoadingIndicator({
duration: props.duration,
throttle: props.throttle
})
expose({
progress, isLoading, start, finish, clear
})
return () => h('div', {
class: 'nuxt-loading-indicator',
style: {
position: 'fixed',
top: 0,
right: 0,
left: 0,
pointerEvents: 'none',
width: 'auto',
height: `${props.height}px`,
opacity: isLoading.value ? 1 : 0,
background: props.color || undefined,
backgroundSize: `${(100 / progress.value) * 100}% auto`,
transform: `scaleX(${progress.value}%)`,
transformOrigin: 'left',
transition: 'transform 0.1s, height 0.4s, opacity 0.4s',
zIndex: 999999
}
}, slots)
}
})