VeloadVue 3

Vue 3 loading states

Make waiting feel intentional.

Veload is an accessible, dependency free collection of polished Vue 3 loaders, skeleton presets and progress components. Every example on this site is the real package, rendered on the server.

Install Veload Browse the loaders
36
named loaders
11
skeleton patterns
0
runtime dependencies
Nuxt
live playground
Live componentRendered on the server

<VSpinDotsLoader :size="72" />

What you get

Built for real interfaces

Small primitives that compose into the loading states your product actually needs.

  • 36 named loaders

    CSS animations covering motion, circular, geometric and utility styles, each with its own detail page and copyable example.

  • Skeleton presets

    Article, card, dashboard, feed, form, list, media card, product, profile and table layouts built from one accessible primitive.

  • Accessible by default

    Status roles, live labels and decorative modes are handled for you. Decorative previews never interrupt a screen reader.

  • Reduced motion aware

    Every animation collapses under prefers-reduced-motion, so the interface stays calm for people who ask for it.

  • Built for Vue 3

    Vue components and composables with no Nuxt module, plugin or global manager required.

  • Typed end to end

    Props, slots and composable return values are exported as TypeScript types, so the editor always knows what a component accepts.

Interactive

Tune a treatment in seconds

These controls drive the previews below. Every loader accepts the same size, colour, duration and label props. The cards stay decorative so they do not interrupt a screen reader; the live component in the hero uses the label.

#6d3ff2

View all 36 loaders

Placeholders

Skeletons that match the final layout

Named presets for the screens you build most often, plus the primitive and pattern APIs behind them.

View all skeleton patterns

Core components

The rest of the toolkit

Spinners, progress bars, loading buttons and content overlays for the states that are not a single animation.

  • VSpinner

    A compact status spinner for inline work such as saving a field.

  • VProgress

    Determinate and indeterminate progress with an accessible value.

  • VLoadingButton

    A native button that disables itself and shows an indicator while it works.

  • VLoading

    An overlay that makes the content beneath it inert while loading.

    Project overview
    Refreshing

  • VLoader

    The generic loader that switches between all 36 treatments.

  • VSkeletonLoader

    The skeleton primitive, exported under its catalogue name.

Get started

Install the package

Documentation for veload@0.1.2. Install the MIT-licensed Vue 3 toolkit from npm.

Terminal
bash
npm install veload

View veload on npm