<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 setup>
defineProps({
  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>
