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 AcvButton from '@/components/button/button.vue';
  import AcvLoading from '@/components/loading/loading.vue';
  import { ref } from '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.

Occupat ille levem iuvenali corpore currum statque super manibusque leves contingere habenas gaudet et invito grates agit inde parenti. Interea volucres Pyrois et Eous et Aethon, Solis equi, quartusque Phlegon hinnitibus auras flammiferis inplent pedibusque repagula pulsant. quae postquam Tethys, fatorum ignara nepotis, reppulit, et facta est inmensi copia caeli, corripuere viam pedibusque per aera motis obstantes scindunt nebulas pennisque levati praetereunt ortos isdem de partibus Euros. sed leve pondus erat nec quod cognoscere possent Solis equi, solitaque iugum gravitate carebat; utque labant curvae iusto sine pondere naves perque mare instabiles nimia levitate feruntur, sic onere adsueto vacuus dat in aera saltus succutiturque alte similisque est currus inani. Quod simulac sensere, ruunt tritumque relinquunt quadriiugi spatium nec quo prius ordine currunt. ipse pavet nec qua commissas flectat habenas nec scit qua sit iter, nec, si sciat, imperet illis. tum primum radiis gelidi caluere Triones et vetito frustra temptarunt aequore tingui, quaeque polo posita est glaciali proxima Serpens, frigore pigra prius nec formidabilis ulli, incaluit sumpsitque novas fervoribus iras; te quoque turbatum memorant fugisse, Boote, quamvis tardus eras et te tua plaustra tenebant.

Source code

vue

<script setup>
  import AcvLoading from '@/components/loading/loading.vue';
  import { ref } from 'vue';
  import phaethon from '../../__mocks__/data.phaethon.txt?raw';

  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.

Source code

vue

<script setup>
  import AcvButton from '@/components/button/button.vue';
  import AcvLoading from '@/components/loading/loading.vue';
  import { ref } from '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 AcvButton from '@/components/button/button.vue';
  import AcvLoading from '@/components/loading/loading.vue';
  import { ref } from '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 AcvButton from '@/components/button/button.vue';
  import AcvLoading from '@/components/loading/loading.vue';
  import { ref } from '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.

Loading Directive

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

ACV Loading ​

Basic usage ​

Sizes ​

Spinner color ​

Background color ​

Fullscreen loading ​

Custom title and description ​

With title and description ​

With title ​

With description ​

Related components ​

Props ​

Events ​

Slots ​

ACV Loading

Basic usage

Sizes

Spinner color

Background color

Fullscreen loading

Custom title and description

With title and description

With title

With description

Related components

Props

Events

Slots