Arrow System

MeEffectiLoader ​

Spinner animado SVG com logo central da Effecti. As cores do traço são lidas automaticamente das CSS custom properties do sistema, garantindo consistência com o tema ativo.

Playground ​

Importação ​

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

Uso Básico ​

Com tamanho padrão de 100px e logo da Effecti.

vue
<MeEffectiLoader />

Tamanhos ​

Tamanhos Pré-definidos ​

Use a prop size com valores numéricos (em px).

vue
<MeEffectiLoader :size="48" />
<MeEffectiLoader :size="64" />
<MeEffectiLoader :size="100" />
<MeEffectiLoader :size="160" />

Tamanho como String CSS ​

A prop size também aceita qualquer valor CSS válido.

vue
<MeEffectiLoader size="4rem" />
<MeEffectiLoader size="10vmin" />

Logo Customizado ​

Substitua o logo central passando uma URL via prop logo.

vue
<MeEffectiLoader logo="/url/do/seu-logo.svg" />

Casos de Uso ​

Tela de Carregamento ​

Carregando...
vue
<template>
  <div v-if="loading" class="loading-screen">
    <MeEffectiLoader :size="120" />
    <span>Carregando...</span>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const loading = ref(true)
</script>

Inline em Botão ou Container ​

vue
<!-- Tamanhos compactos para uso inline -->
<MeEffectiLoader :size="24" />
<MeEffectiLoader :size="32" />
<MeEffectiLoader :size="40" />

API ​

Props ​

PropTipoPadrãoDescrição
sizenumber | string100Tamanho (width e height) do SVG. Aceita número em px ou string CSS (ex: '5rem').
logostringlogo Effecti (bundlado)URL do logo exibido no centro do spinner.
viewBoxstring'0 0 100 100'ViewBox do SVG. Controla o sistema de coordenadas interno.

Eventos ​

Este componente não emite eventos.

Slots ​

Este componente não possui slots.

Acessibilidade ​

  • O SVG não possui texto visível — adicione um aria-label no elemento pai quando usado como indicador de carregamento
  • Use role="status" e aria-live="polite" no container para anunciar o estado a leitores de tela
vue
<div role="status" aria-live="polite" aria-label="Carregando conteúdo">
  <MeEffectiLoader :size="80" />
</div>