<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>