Motion loader

Typing

Conversation typing cue

VTypingLoadertyping

<VTypingLoader :size="48" color="#6d3ff2" :duration="1200" label="Loading content" />

Controls

#6d3ff2

Sets the accessible name of the status region. The preview also shows the text so you can read the state you describe.

Implementation

vue
<script setup lang="ts">
import { VTypingLoader } from "veload";
import "veload/style.css";
</script>

<template>
  <VTypingLoader :size="48" color="#6d3ff2" :duration="1200" label="Loading content" />
</template>

Props

VTypingLoader props
PropTypeDefaultDescription
colorstring"currentColor"Primary colour of the loader. Accepts any CSS colour value, including `currentColor`.
sizenumber40Diameter or height of the loader in pixels. Values below 12 are clamped to 12.
durationnumber1000Duration of one animation cycle in milliseconds. Values below 100 are clamped to 100.
countnumber4Number of marks rendered by treatments that repeat an element. Clamped to 1–12.
labelstring"Loading"Accessible name announced by the status region. An empty label makes the loader decorative.
decorativebooleanfalseHides the loader from assistive technology. Use it when an ancestor already announces the loading state.

About this treatment

  • Four dots shrink in sequence to mimic a typing indicator.
  • Best suited to chat, comment and assistant interfaces.
  • Use the `count` prop to adjust the number of dots.