ACV Loading
Loading is a widget that indicates a loading state.
Used when the action takes a certain amount of time.
Loading can be global and override the entire interface or local, for example, show the status of an operation in a separate section or button.
Loading informs the user about the current status of the operation, but does not report when the process ends and is applied when the completion time of the operation is not known in advance.
In all other cases, circle progress is used.
Basic usage
You can use the acv-loading component to add a loading to an element.
Source code
vue
<script setup>
import { ref } from 'vue';
import AcvLoading from '@/widgets/loading/loading.vue';
import AcvButton from '@/components/button/button.vue';
const loading = ref(false);
</script>
<template>
<AcvButton @click="loading = !loading">
Show loading
</AcvButton>
<AcvLoading
v-model="loading"
fullscreen
@click="loading = false"
/>
</template>Sizes
You can specify the size of the loading spinner with size prop.
Source code
vue
<script setup>
import { ref } from 'vue';
import phaethon from '../__data__/data.phaethon.txt?raw';
import AcvLoading from '@/widgets/loading/loading.vue';
const loading = ref(true);
</script>
<template>
<div class="acv-grid acv-grid--cols-4">
<div class="item">
<AcvLoading
v-model="loading"
size="small"
/>
{{ phaethon }}
</div>
<div class="item">
<AcvLoading
v-model="loading"
size="medium"
/>
{{ phaethon }}
</div>
<div class="item">
<AcvLoading
v-model="loading"
size="large"
/>
{{ phaethon }}
</div>
<div class="item">
<AcvLoading
v-model="loading"
size="x-large"
/>
{{ phaethon }}
</div>
</div>
</template>
<style scoped>
.acv-grid {
.item {
width: 128px;
height: 128px;
position: relative;
overflow: clip;
padding: 8px;
}
}
</style>Spinner color
You can specify the color of the loading spinner with color prop. Use brand colors(primary, secondary, inverted etc.) for the spinner.
Loading with primary spinner
Source code
vue
<script setup>
import { ref } from 'vue';
import AcvLoading from '@/widgets/loading/loading.vue';
import AcvButton from '@/components/button/button.vue';
const spinnerColors = ['primary', 'secondary', 'white', 'black', 'purple'];
const loading = ref(false);
const color = ref(spinnerColors[0]);
function showLoading() {
loading.value = true;
const currSpinnerColor = spinnerColors.indexOf(color.value);
color.value = spinnerColors[currSpinnerColor + 1] || spinnerColors[0];
}
</script>
<template>
<AcvButton @click="showLoading">
Show loading
</AcvButton>
<AcvLoading
v-model="loading"
fullscreen
:opacity="0.7"
background="secondary"
:color="color"
:title="`Loading with ${color} spinner`"
@click="loading = false"
/>
</template>Background color
You can specify the background color and opacity of the loading backdrop with backgroundColor and opacity props.
Source code
vue
<script setup>
import { ref } from 'vue';
import AcvLoading from '@/widgets/loading/loading.vue';
import AcvButton from '@/components/button/button.vue';
const loading = ref(false);
const secondaryLoading = ref(false);
const tertiaryLoading = ref(false);
const invertedLoading = ref(false);
</script>
<template>
<AcvButton @click="loading = !loading">
Show default loading
</AcvButton>
<AcvButton @click="secondaryLoading = !secondaryLoading">
Show secondary loading
</AcvButton>
<AcvButton @click="tertiaryLoading = !tertiaryLoading">
Show tertiary loading
</AcvButton>
<AcvButton @click="invertedLoading = !invertedLoading">
Show inverted loading
</AcvButton>
<AcvLoading
v-model="loading"
size="x-large"
fullscreen
@click="loading = false"
/>
<AcvLoading
v-model="secondaryLoading"
background="secondary"
size="x-large"
fullscreen
@click="secondaryLoading = false"
/>
<AcvLoading
v-model="tertiaryLoading"
background="tertiary"
size="x-large"
fullscreen
@click="tertiaryLoading = false"
/>
<AcvLoading
v-model="invertedLoading"
background="inverted"
size="x-large"
fullscreen
@click="invertedLoading = false"
/>
</template>
<style scoped>
.acv-button {
margin:0 8px 8px 0;
}
</style>Fullscreen loading
You can use the fullscreen prop to add a fullscreen loading.
Source code
vue
<script setup>
import { ref } from 'vue';
import AcvLoading from '@/widgets/loading/loading.vue';
import AcvButton from '@/components/button/button.vue';
const loading = ref(false);
</script>
<template>
<AcvButton @click="loading = !loading">
Show loading
</AcvButton>
<AcvLoading
v-model="loading"
size="x-large"
fullscreen
@click="loading = false"
/>
</template>Custom title and description
In addition to the spinner, you can add a title and description.
With title and description
Use the title and description props to add a title and description.
Data is loading
Wait until it is completed.
With title
If you only want to add a title, use the title prop.
It will be displayed to the right side of the loading spinner.
Data is loading...
With description
If you only want to add a description, use the description prop.
It will be displayed below the loading spinner.
Wait until it is completed.
Related components
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| modelValue | Loading visibility state | boolean | - | false |
| fullscreen | Whether the Loading is fullscreen | boolean | - | false |
| background | Backdrop background color | ColorProp | boolean | - | 'primary' |
| opacity | Opacity of the backdrop background | number | - | 0.5 |
| color | Color of the spinner | ColorProp | - | 'primary' |
| size | Size of the spinner | ComponentSize | - | 'medium' |
| title | Title of the loading | string | - | |
| description | Description of the loading | string | - | |
| textColor | Loading title and description color | string | - |
Events
| Event name | Properties | Description |
|---|---|---|
| afterLeave | eventName mixed - undefined | Triggered when the transition wrapper emits a 'afterLeave' event |
Slots
| Name | Description | Bindings |
|---|---|---|
| title | Title slot content | |
| description | The description slot content |