<template>
  <div class="el-skeleton is-animated">
    <div class="el-skeleton__item w-full" :class="_class" :style="_style"></div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
export default Vue.extend({
  props: ["_class", "_style"],
});
</script>

<style lang="less" scoped>
.el-skeleton__item {
  background: #f2f2f2;
  display: inline-block;
  border-radius: 4px;
}

.el-skeleton.is-animated .el-skeleton__item {
  background: linear-gradient(90deg, #0c0b31 25%, #282740 37%, #0c0b31 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>