<template>
|
<div class="skelecton_container" :style="style"></div>
|
</template>
|
|
<script setup lang="ts">
|
import { defineProps } from "vue";
|
|
const props = defineProps<{
|
style: ISkelectonStyle;
|
}>();
|
</script>
|
|
<style lang="scss" scoped>
|
.skelecton_container {
|
width: 100%;
|
height: 60px;
|
background: linear-gradient(90deg, #f0f2f5 25%, #e6e8eb 37%, #f0f2f5 63%);
|
background-size: 400% 100%;
|
animation: el-skeleton-loading 1.4s ease infinite;
|
}
|
@keyframes el-skeleton-loading {
|
0% {
|
background-position: 100% 50%;
|
}
|
|
to {
|
background-position: 0 50%;
|
}
|
}
|
</style>
|
