LxComponents

Loading ​

Visão geral ​

O LxLoading é uma tela de carregamento com uma mensagem opcional. Ele é útil para indicar visualmente que uma ação está sendo processada ou que um conteúdo está sendo carregado.

Clique para exibir o código
vue
<template>
	<LxLoading v-if="isActive" msg="Aguarde, estamos processando sua solicitação..."/>

	<button class="btn btn-primary" @click="toogleLoading">Testar (temporizador 3segs)</button>
</template>

<script setup>
	import { ref } from 'vue'

 	import { LxLoading } from '@/index';

	const isActive = ref(false);

	const toogleLoading = () => {
		isActive.value = !isActive.value;

		setTimeout(() => {
			isActive.value = !isActive.value;
		}, 3000);
	};

</script>
<template>
	<LxLoading v-if="isActive" msg="Aguarde, estamos processando sua solicitação..."/>

	<button class="btn btn-primary" @click="toogleLoading">Testar (temporizador 3segs)</button>
</template>

<script setup>
	import { ref } from 'vue'

 	import { LxLoading } from '@/index';

	const isActive = ref(false);

	const toogleLoading = () => {
		isActive.value = !isActive.value;

		setTimeout(() => {
			isActive.value = !isActive.value;
		}, 3000);
	};

</script>

Propriedades ​

NomeDescriçãoTipoPadrão
msg⚠️ obr Mensagem de carregamentoStringCarregando...