You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
826 B
52 lines
826 B
<template> |
|
<view class="skeleton" :style="{width, height}"></view> |
|
</template> |
|
|
|
<script setup> |
|
import { defineProps } from 'vue' |
|
|
|
defineProps({ |
|
width: { |
|
type: String, |
|
default: '' |
|
}, |
|
height: { |
|
type: String, |
|
default: '' |
|
} |
|
}) |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.skeleton { |
|
height: 100%; |
|
background: #f0f0f0; |
|
position: relative; |
|
border-radius: 24rpx; |
|
display: block; |
|
} |
|
.skeleton::after { |
|
content: ""; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 100%; |
|
background: linear-gradient( |
|
90deg, |
|
transparent, |
|
rgba(255, 255, 255, 0.5), |
|
transparent |
|
); |
|
animation: skeleton-shimmer 1.5s infinite; |
|
} |
|
|
|
@keyframes skeleton-shimmer { |
|
0% { |
|
transform: translateX(-100%); |
|
} |
|
100% { |
|
transform: translateX(100%); |
|
} |
|
} |
|
</style> |