Loading overlay

The BLoadingOverlay component is used to display a loading indicator over parts of the ui. This is useful when you need to display a loading indicator over a dialog or form while data is being loaded or saved.

Usage

The overlay can be used in two ways. The default mode will display a loading indicator over the entire page. The second contained mode will display the loading indicator over its closest relatively positioned parent element.

I will get covered by the overlay

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

const isLoadingFull = ref(false)
function showFullOverlay() {
  isLoadingFull.value = true
  setTimeout(() => {
    isLoadingFull.value = false
  }, 3000)
}

const isLoadingContained = ref(false)
function showContainedOverlay() {
  isLoadingContained.value = true
  setTimeout(() => {
    isLoadingContained.value = false
  }, 3000)
}
</script>

<template>
  <div class="grid gap-8">
    <BLoadingOverlay v-model="isLoadingFull" />
    <BBtn @click="showFullOverlay">
      Show full Overlay
    </BBtn>

    <div class="relative h-42 border-solid rounded-lg border-outline flex justify-center items-center font-bold text-lg">
      <BLoadingOverlay
        v-model="isLoadingContained"
        contained
      />
      I will get covered by the overlay
    </div>

    <BBtn @click="showContainedOverlay">
      Show contained Overlay
    </BBtn>
  </div>
</template>