AisProgress

AisProgress provides a visual indication that the application is in a busy state. A progress indicator has three modes: determinate, indeterminate, and buffer. Each mode expresses a specific type of busy state depending on available information. See also AisSpinner.

Mode

Determinate

Use the determinate mode when you have a finite list to process and can calculate the completion percentage. Processing a list of files is a common use for a determinate progress bar.

Variant

defaultprimarysecondaryinfosuccesswarningdanger

Height

10px

Value

25%

Show Value

truefalse

Value Position

startcenterend

<script lang="ts" setup>
import { ref, computed } from "vue";
import { AisProgress } from '@ais-public/ais-components';
import { AisField } from '@ais-public/ais-components';
import { AisSelect } from '@ais-public/ais-components';
import { variants } from "@/util/variants-util";
import { Ref, UnwrapRef } from "vue/dist/vue";

const progressBarVariants: String[] = variants.filter(
  (v: String) => v !== "plain"
);
const variant: Ref<UnwrapRef<String>> = ref(progressBarVariants[1]);
const value: Ref<UnwrapRef<Number>> = ref(25);
const height: Ref<UnwrapRef<Number>> = ref(10);
const heightVal = computed(() => Number(height.value));
const showValue: Ref<UnwrapRef<Boolean>> = ref(false);
const valuePosition: Ref<UnwrapRef<String>> = ref('center');
</script>

<template>
  <div class="grid gap-8">
    <AisProgress
      :height="heightVal"
      :value="value"
      :variant="variant"
      aria-label="Progress bar with value"
      :showValue="showValue"
      :valuePosition="valuePosition"
    />
    <div class="grid gap-2 md:grid-cols-4 p-4 border rounded bg-ui-gray-50">
      <AisField label="Variant">
        <AisSelect v-model="variant" :options="progressBarVariants" size="sm" />
      </AisField>
      <AisField label="Height">
        <input v-model="height" type="range" min="1" max="100" /> {{ height }}px
      </AisField>
      <AisField label="Value">
        <input v-model.number="value" type="range" /> {{ value }}%
      </AisField>
      <AisField label="Show Value">
        <AisSelect v-model="showValue" :options="[true, false]" size="sm" />
      </AisField>
      <AisField label="Value Position" v-show="showValue">
        <AisSelect v-model="valuePosition" :options="['start', 'center', 'end']" size="sm" />
      </AisField>
    </div>
  </div>
</template>

Indeterminate

Use the indeterminate mode when it is not necessary or not possible know how close a task is to completion. A common need for an indeterminate progress bar is loading content over a network.

Variant

defaultprimarysecondaryinfosuccesswarningdanger

Height

10px

<script lang="ts" setup>
import { Ref, ref, UnwrapRef, computed } from "vue";
import { AisProgress } from '@ais-public/ais-components';
import { AisField } from '@ais-public/ais-components';
import { AisSelect } from '@ais-public/ais-components';
import { variants } from "@/util/variants-util";

const progressBarVariants: String[] = variants.filter(
  (v: String) => v !== "plain"
);
const variant: Ref<UnwrapRef<String>> = ref(progressBarVariants[1]);
const height: Ref<UnwrapRef<Number>> = ref(10);
const heightVal = computed(() => Number(height.value));

</script>

<template>
  <div class="grid gap-8">
    <AisProgress :height="heightVal" :variant="variant" mode="indeterminate" />
    <div class="grid gap-2 md:grid-cols-4 p-4 border rounded bg-ui-gray-50">
      <AisField label="Variant">
        <AisSelect v-model="variant" :options="progressBarVariants" size="sm" />
      </AisField>
      <AisField label="Height">
        <input v-model="height" type="range" min="1" max="100" /> {{ height }}px
      </AisField>
    </div>
  </div>
</template>

Buffer

Use buffer mode when working with media content like streaming video.

Variant

defaultprimarysecondaryinfosuccesswarningdanger

Height

10px

Value

25%

Buffer

40%

<script lang="ts" setup>
import { ref, computed } from "vue";
import { AisProgress } from '@ais-public/ais-components';
import { AisField } from '@ais-public/ais-components';
import { AisSelect } from '@ais-public/ais-components';
import { variants } from "@/util/variants-util";
import { Ref, UnwrapRef } from "vue/dist/vue";

const progressBarVariants: String[] = variants.filter(
  (v: String) => v !== "plain"
);
const variant: Ref<UnwrapRef<String>> = ref(progressBarVariants[1]);
const value: Ref<UnwrapRef<Number>> = ref(25);
const buffer: Ref<UnwrapRef<Number>> = ref(40);
const height: Ref<UnwrapRef<Number>> = ref(10);
const heightVal = computed(() => Number(height.value));
</script>

<template>
  <div class="grid gap-8">
    <AisProgress
      :height="heightVal"
      :buffer="buffer"
      :value="value"
      :variant="variant"
      mode="buffer"
    />
    <div class="grid gap-2 md:grid-cols-4 p-4 border rounded bg-ui-gray-50">
      <AisField label="Variant">
        <AisSelect v-model="variant" :options="progressBarVariants" size="sm" />
      </AisField>
      <AisField label="Height">
        <input v-model="height" type="range" min="1" max="100" /> {{ height }}px
      </AisField>
      <AisField label="Value">
        <input v-model.number="value" type="range" /> {{ value }}%
      </AisField>
      <AisField label="Buffer">
        <input v-model.number="buffer" type="range" /> {{ buffer }}%
      </AisField>
    </div>
  </div>
</template>

<style scoped></style>

Custom message

Use the value slot to provide a custom progress message.

Variant

defaultprimarysecondaryinfosuccesswarningdanger

Value

25%

<script lang="ts" setup>
import { ref } from "vue";
import { AisProgress } from '@ais-public/ais-components';
import { AisField } from '@ais-public/ais-components';
import { AisSelect } from '@ais-public/ais-components';
import { variants } from "@/util/variants-util";
import { Ref, UnwrapRef } from "vue/dist/vue";

const progressBarVariants: String[] = variants.filter(
  (v: String) => v !== "plain"
);
const variant: Ref<UnwrapRef<String>> = ref(progressBarVariants[1]);
const value: Ref<UnwrapRef<Number>> = ref(25);
</script>

<template>
  <div class="grid gap-8">
    <AisProgress
        :height="16"
      :value="value"
      :variant="variant"
      aria-label="Progress bar with custom value"
    >
    <template #value>
      <div class="flex items-center justify-center text-xs px-10 my-auto relative"><strong>Current progress: {{ value }}%</strong></div>
    </template>
  </AisProgress>
    <div class="grid gap-2 md:grid-cols-4 p-4 border rounded bg-ui-gray-50">
      <AisField label="Variant">
        <AisSelect v-model="variant" :options="progressBarVariants" size="sm" />
      </AisField>
      <AisField label="Value">
        <input v-model.number="value" type="range" /> {{ value }}%
      </AisField>
    </div>
  </div>
</template>

Accessibility

Screen Reader

AisProgress components use the role progressbar along with the aria-value attribute for the determinate and buffer modes.

Specify a label to describe the progress bar with the aria-labelledby and aria-label attributes.

<span id="progress_label">Progress Label</span>
<AisProgress mode="indeterminate" aria-labelledby="progress_label" />

<!-- OR -->
<AisProgress value="88" aria-label="Progress Label" />

Component Reference

Props

Property	Type(s)	Required	Default	Description	Deprecated
buffer	Number		0	The current buffer amount. From 0 to 100.	false
height	Number		4	Height of the progress bar. Defaults to 4. Valid values: Use a factor of 16 to match our TailwindCSS spacing scale, e.g. 2, 4, 8, 16, 24, 32.	false
mode	String		'determinate'	Works along with value prop. Apply a 0% to 100% loading bar. Valid values: determinate - The default mode. Works along with value prop. Apply a 0 to 100 loading bar. indeterminate - Create an indeterminate loading bar. query - Create a loading bar for queries. Useful when retrieving a lot of contents. buffer - Create a loading bar with a buffer. Commonly used in videos.	false
showValue	Boolean		false	Shows the current progress value. NOTE: Has no impact when using value slot.	false
value	Number		0	The current progress value. From 0 to 100.	false
valuePosition	String		'center'	Sets the position of the value. NOTE: Has no impact when using value slot or when showValue is false. Valid values: start center end	false
variant	String		'primary'	Applies one of the theme color variants to the component Valid values: primary, secondary, default, info, success, warning, danger	false

Slots

Name	Scoped	Description
value	No	Slot for custom rendering the progress value.