Preloader & loading patterns
Patterns for showing progress during navigation, lazy-loaded sections, and async work. Spinner markup, modifiers, quad loader (.vd-dynamic-loader*), accessibility notes, and the full CSS class reference live on Spinners. Determinate bars (sizes, stripes, indeterminate, stacked fills, API) are documented under Progress.
Inline loading
Use beside controls or inside buttons while work completes.
Progress handoff
Switch from indeterminate spinners to a bar once you know completion percentage.
Page-level quad loader
Same structure as this documentation site's placeholders: semantic-colored spinners inside .vd-dynamic-loader. Staggered rotation comes from spinner.css (.vd-dynamic-loader-grid); extra animation-delay on each cell is optional.
Skeleton + quad overlay
Use .vd-dynamic-loader-card so the loader sits above skeleton placeholders with the built-in scrim (see Spinners).
Copy-paste patterns
These snippets rely only on classes from the Vanduo bundle (vanduo.css imports spinner.css). No separate "required CSS" block.
<script setup lang="ts">
import { VdPreloader } from "@vanduo-oss/vd3";
</script>
<template>
<VdPreloader text="Loading…" />
<VdPreloader variant="success" size="lg" />
</template>VdPreloader API (Vue 3)
| Prop | Description |
|---|---|
:variant | primary | secondary | success | warning | error | info (default primary). |
:size | sm | md | lg | xl (default md). |
:theme | light | dark (default light). |
:text | Optional caption below the loader. |
For scroll- or fetch-triggered placeholders in your own app, reach for the useLazyLoad composable — see the Lazy Loading guide.
API reference
Spinner and quad-loader CSS classes are fully listed on Spinners. Progress bar classes and examples are on Progress.
| Topic | Where to read more |
|---|---|
.vd-spinner*, .vd-spinner-dots, .vd-spinner-grow, .vd-spinner-center | Spinners — demos, variables, accessibility |
.vd-dynamic-loader, .vd-dynamic-loader-grid, .vd-dynamic-loader-text, .vd-dynamic-loader-card | Spinners (quad loader section) |
.vd-progress, .vd-progress-bar, modifiers | Progress |
VdPreloader component | Drives modern .vd-progress-bar[data-progress] and legacy .progress-bar[data-progress] for compatibility. |