71 lines
1.1 KiB
Plaintext
71 lines
1.1 KiB
Plaintext
<template>
|
|
<view class="skeleton-base" :class="{ loading: loading }">
|
|
<view v-if="loading" class="skeleton-shimmer"></view>
|
|
<slot v-else></slot>
|
|
<view v-if="loading" class="skeleton-content">
|
|
<slot name="skeleton"></slot>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
loading: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.skeleton-base {
|
|
position: relative;
|
|
overflow: hidden;
|
|
min-height: 40rpx;
|
|
}
|
|
|
|
.skeleton-content {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.skeleton-shimmer {
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
rgba(255, 255, 255, 0.6),
|
|
transparent
|
|
);
|
|
animation: shimmer 1.5s infinite;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% {
|
|
left: -100%;
|
|
}
|
|
100% {
|
|
left: 100%;
|
|
}
|
|
}
|
|
|
|
.skeleton-base.loading {
|
|
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
|
background-size: 200% 100%;
|
|
animation: loading 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes loading {
|
|
0% {
|
|
background-position: 200% 0;
|
|
}
|
|
100% {
|
|
background-position: -200% 0;
|
|
}
|
|
}
|
|
</style>
|