<template>
  <div class="spin">
    <span class="spin__dot"></span>
  </div>
</template>

<script>
export default {
  name: 'Spin',
  props: {
    msg: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="less" scoped>
@dotWidth: 32px;
@dotHeight: 32px;

@keyframes ani-spin-bounce {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

.spin {
  width: @dotWidth;
  height: @dotHeight;
  &__dot {
    display: block;
    border-radius: 50%;
    background-color: #2d8cf0;
    width: @dotWidth;
    height: @dotHeight;
    animation: ani-spin-bounce 1s 0s ease-in-out infinite;
  }
}
</style>
