Vue loading placeholder

loading-placeholder.vue

<template>
  <div :class="classes" :style="styles">
    <img :src="imgsrc">
  </div>
</template>

<script>
export default {
  props: {
    width: {
      type: [Number, String],
      default: '1'
    },
    height: {
      type: [Number, String],
      default: '1'
    },
    speed: {
      type: Number,
      default: 1.5
    },
    animated: {
      type: Boolean,
      default: true,
    },
    backgroundColor: {
      type: String,
      default: 'rgba(0, 0, 0, 0.05)',
    },
    color: {
      type: String,
      default: '#e9e9e9',
    },
    size: {
      type: [Number, String],
      default: 250,
    },
    rounded: {
      type: [Boolean, String],
      default: null
    }
  },
  computed: {
    classes () {
      const res = ['loading-placeholder']
      if (this.animated) res.push('is-animated')
      if (this.rounded) res.push(
        typeof this.rounded === 'string'
          ? 'rounded-' + this.rounded
          : 'rounded'
      )
      return res
    },
    styles () {
      return {
        '--background-color': this.backgroundColor,
        '--shadow-color': this.color,
        '--speed': this.speed + 's',
        '--shadow-size': this.size + 'px',
        '--shadow-size-neg': -parseInt(this.size) + 'px',
        width: this.width,
        height: this.height
      }
    },
    imgsrc () {
      return (
        'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22' +
        '%20viewBox%3D%220%200%20' + this.width + '%20' + this.height + '%22' +
        '%20width%3D%22' + this.width + '%22' +
        '%20height%3D%22' + this.height + '%22' +
        '%2F%3E'
      )
    }
  }
}
</script>

<style>
.loading-placeholder {
  position: relative;
  overflow: hidden;
  background-color: var(--background-color);
}
.loading-placeholder.is-animated::before {
  content: '';
  display: block;
  position: absolute;
  left: var(--shadow-size-neg);
  top: 0;
  height: 100%;
  width: var(--shadow-size);
  background: linear-gradient(to right, transparent 0%, var(--shadow-color) 50%, transparent 100%);
  animation-name: loadingPlaceholderAnimation;
  animation-duration: var(--speed);
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
}
.loading-placeholder img {
  width: 100%;
  display: block;
}
@keyframes loadingPlaceholderAnimation {
  from { left: var(--shadow-size-neg) }
  to { left: 100% }
}
</style>