Vue animation example
Vue Spinner: Bouncing Dots Loading Animation
Three bouncing dots are the friendliest loading indicator: they say "wait a moment" without the urgency of a spinning ring. These dots use real gravity, so they slow at the top of each bounce and squash when they land, with a shadow that shrinks as they rise.
- 3.9 KB file
- 5 live inputs
- Vue runtime
How this bouncing dots spinner works
- Each dot follows a parabolic bounce, gravity rather than a sine wave, offset in time from its neighbour.
- Dots squash on contact and their shadows scale with height.
- Bounce height and tempo are inputs; it runs in Vue through the exodeui-vue runtime.
Add it to your Vue app
Install exodeui-vue, download the file below, and paste this. The code updates as you customize. Other runtimes are in the other tabs.
<script setup>
import { ExodeUICanvas } from 'exodeui-vue';
</script>
<template>
<ExodeUICanvas
src="/vue-spinner.exode"
fit="Layout"
style="width: 100%; height: 380px"
/>
</template>Inputs
| Input | Type | Default | Range |
|---|---|---|---|
height | Number | 1 | 0.3 – 2 |
tempo | Number | 1 | 0.3 – 3 |
label | Text | Loading | — |
accent | Text | #42b883 | hex colour |
bg | Text | #0f1a17 | hex colour |
More Vue animations
Slide and Fade Route TransitionDirection-aware route transitions: pages slide and fade toward the tab you chose, with a sliding indicator.Starfield Parallax HeroA space hero with three star layers, a planet and a rocket moving at different depths.Odometer CounterAn odometer counter whose digits roll independently on springs to each new value.
The same idea in other frameworks: React orbit loader · Flutter bouncing bars loader · SwiftUI activity rings loader