<template>
  <div v-if="visible" class="kole-loading-overlay" :class="{ 'is-inline': inline, 'is-dark': dark }">
    <div class="kole-loading-spinner"></div>
    <div class="kole-loading-text" v-if="text">{{ text }}</div>
  </div>
</template>

<script>
export default {
  name: 'KoleLoadingOverlay',
  props: {
    visible: { type: Boolean, default: false },
    text: { type: String, default: '' },
    inline: { type: Boolean, default: false },
    dark: { type: Boolean, default: false }
  }
};
</script>

<style src="./LoadingOverlay.css"></style>
