59 lines
1.1 KiB
Vue
59 lines
1.1 KiB
Vue
<template>
|
|
<view class="favorite-loader" :class="animation || ''" :style="[getLoaderStyle]">
|
|
<text v-if="isText">{{text}}</text>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'FavoriteLoading',
|
|
props: {
|
|
isText: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
text: {
|
|
type: String,
|
|
default: 'Loading...'
|
|
},
|
|
animation: {
|
|
type: String,
|
|
default: 'opacity'
|
|
},
|
|
color: {
|
|
type: [Array, String],
|
|
default: ''
|
|
}
|
|
},
|
|
computed: {
|
|
getLoaderStyle() {
|
|
const styles = {}
|
|
const color = this.color
|
|
const animation = this.animation
|
|
if (color) {
|
|
if (Array.isArray(color) && color.length === 2) {
|
|
styles[`--${animation}_0`] = color[0]
|
|
styles[`--${animation}_1`] = color[1]
|
|
} else {
|
|
styles[`--${animation}`] = color
|
|
}
|
|
}
|
|
return styles
|
|
}
|
|
},
|
|
data() {
|
|
return {}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import './style.scss';
|
|
@import './dots.scss';
|
|
@import './bars.scss';
|
|
@import './spinner.scss';
|
|
@import './progress.scss';
|
|
@import './infinity.scss';
|
|
@import './pulsing.scss';
|
|
</style>
|