<template>
  <div class="Loader" v-if="flag">
    <q-card>
      <q-card-section>
        {{ message }}
        <q-spinner-ios
          color="primary"
          size="2em"
        />
      </q-card-section>
    </q-card>
  </div>
</template>

<script>
export default {
  name: 'loader-with-text',
  props: {
    flag: {
      type: Boolean,
      default: false,
    },
    message: {
      type: String,
      default: 'Выполняется действие',
    }
  },
};
</script>

<style scoped lang="scss">
.Loader {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 9999;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: rgba(143, 132, 132, 0.7);
}
</style>
