Arrow System

MeInnerLoading ​

Overlay de carregamento posicionado sobre um container ou em tela cheia, com spinner CSS nativo ou MeEffectiLoader.

Playground ​

Importação ​

vue
<script>
import { MeInnerLoading } from '@/components/global/utils/export/index'
</script>

Uso Básico ​

Envolva o conteúdo da página num container com position: relative e coloque MeInnerLoading dentro dele.

vue
<div style="position: relative; height: 200px;">
  <MeInnerLoading :visible="isLoading" />
</div>

Spinner CSS vs Effecti Loader ​

Por padrão, o componente usa um spinner CSS puro. Com :effecti-loader="true", usa o MeEffectiLoader.

vue
<!-- Spinner CSS (padrão) -->
<MeInnerLoading :visible="isLoading" />

<!-- Effecti Loader -->
<MeInnerLoading :visible="isLoading" effecti-loader />

Tamanho do Spinner ​

Use spinnerSize para controlar o tamanho.

vue
<MeInnerLoading :visible="isLoading" spinner-size="24px" />
<MeInnerLoading :visible="isLoading" spinner-size="36px" />
<MeInnerLoading :visible="isLoading" spinner-size="56px" />

Cor do Spinner ​

Use spinnerColor para personalizar a cor do spinner CSS.

vue
<MeInnerLoading :visible="isLoading" spinner-color="#121d59" />
<MeInnerLoading :visible="isLoading" spinner-color="#e74c3c" />
<MeInnerLoading :visible="isLoading" spinner-color="#2ecc71" />

Cor de Fundo ​

Use bgColor para definir a cor de fundo do overlay.

vue
<!-- Fundo claro semi-transparente -->
<MeInnerLoading
  :visible="isLoading"
  bg-color="rgba(255,255,255,0.85)"
/>

<!-- Fundo escuro -->
<MeInnerLoading
  :visible="isLoading"
  bg-color="rgba(0,0,0,0.4)"
  spinner-color="#ffffff"
/>

Fullscreen ​

Com fullscreen, o overlay cobre a tela inteira com fundo semi-transparente (rgba(0,0,0,0.2)).

⚠️ Ative no Playground para ver o efeito fullscreen em tela cheia.
vue
<MeInnerLoading :visible="isLoading" fullscreen />

TIP

No modo fullscreen, as props bgColor e height são ignoradas. O fundo sempre será rgba(0,0,0,0.2) e a altura sempre 100vh.

Controle de Visibilidade ​

O overlay é montado/desmontado via v-if conforme a prop visible.

vue
<script setup>
import { ref } from 'vue'
const isLoading = ref(false)

async function fetchData() {
  isLoading.value = true
  try {
    await api.getData()
  } finally {
    isLoading.value = false
  }
}
</script>

<template>
  <div style="position: relative;">
    <DataTable :data="data" />
    <MeInnerLoading :visible="isLoading" bg-color="rgba(255,255,255,0.85)" />
  </div>
</template>

API ​

Props ​

PropTipoPadrãoDescrição
visiblebooleanfalseControla a visibilidade do overlay
fullscreenbooleanfalseModo tela cheia com fundo rgba(0,0,0,0.2)
effectiLoaderbooleanfalseUsa MeEffectiLoader no lugar do spinner CSS
spinnerSizestring'36px'Tamanho do spinner (width e height)
spinnerBorderWidthstring'4px'Largura da borda do spinner CSS
spinnerColorstring'#121d59'Cor do spinner CSS
bgColorstring'transparent'Cor de fundo do overlay (ignorado em fullscreen)
heightstring'100%'Altura do container (ignorado em fullscreen)

Acessibilidade ​

  • O overlay é removido do DOM quando visible=false (usa v-if, não v-show)
  • Em fullscreen, aplica z-index: 9999 para garantir que fica sobre todos os elementos

Boas práticas

Sempre use MeInnerLoading dentro de um container com position: relative para que o overlay fique posicionado corretamente sobre o conteúdo da seção.