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
<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
| Prop | Type | Default | Description |
|---|---|---|---|
color | string | "currentColor" | Primary colour of the loader. Accepts any CSS colour value, including `currentColor`. |
size | number | 40 | Diameter or height of the loader in pixels. Values below 12 are clamped to 12. |
duration | number | 1000 | Duration of one animation cycle in milliseconds. Values below 100 are clamped to 100. |
count | number | 4 | Number of marks rendered by treatments that repeat an element. Clamped to 1–12. |
label | string | "Loading" | Accessible name announced by the status region. An empty label makes the loader decorative. |
decorative | boolean | false | Hides 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.