future
45 lines
829 B
Vue
45 lines
829 B
Vue
<template>
|
|
<view class="skeleton" :style="{ padding: padding }">
|
|
<slot />
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
padding: {
|
|
type: String,
|
|
default: '20rpx'
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.skeleton {
|
|
background-color: #f5f5f5;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
:deep(.skeleton-shimmer) {
|
|
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 1.5s infinite;
|
|
}
|
|
|
|
:deep(.skeleton-line) {
|
|
height: 32rpx;
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
:deep(.skeleton-block) {
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
:deep(.skeleton-circle) {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% { background-position: 200% 0; }
|
|
100% { background-position: -200% 0; }
|
|
}
|
|
</style> |