<template>
  <div class="vc-text-loader text-inactive-text w-max">
    {{ loadingText }}
    <span class="dot">.</span>
    <span class="dot">.</span>
    <span class="dot">.</span>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'Text',
  props: {
    text: {
      type: String,
      default: ''
    }
  },
  computed: {
    loadingText () {
      return this.text ? this.text : this.$tVU.t('loader.loading')
    }
  }
})
</script>

<style lang="scss" scoped>
.vc-text-loader {
  .dot:nth-child(1) {
    animation: dotsAnimation 1s .2s linear infinite;
  }
  .dot:nth-child(2) {
    animation: dotsAnimation 1s .4s linear infinite;
  }
  .dot:nth-child(3) {
    animation: dotsAnimation 1s .6s linear infinite;
  }
}
</style>
