JavaScript animation example
JavaScript Progress Animation: Circular Upload Ring
Circular progress fits where a bar will not: avatars, upload buttons, cards. This ring fills with a gradient arc whose leading edge glows, the number in the middle counts up smoothly, and at 100% the upload arrow morphs into a checkmark and the ring pulses once. Set the progress input from your upload callback.
- 4.4 KB file
- 5 live inputs
- JavaScript runtime
How this upload progress ring works
- The displayed value chases the progress input, so irregular network updates still animate smoothly.
- The arc uses a conic-style gradient approximation with a glowing cap at its leading end.
- Crossing 100 morphs the arrow into a check and fires "complete".
Add it to your JavaScript app
Install exodeui-vanilla, download the file below, and paste this. The code updates as you customize. Other runtimes are in the other tabs.
import { ExodeUICanvas } from 'exodeui-vanilla';
// <canvas id="javascript-progress-ring" style="width: 100%; height: 460px"></canvas>
const player = new ExodeUICanvas({
element: '#javascript-progress-ring',
fit: 'Layout',
onReady: (engine) => { },
onTrigger: (name) => {
// fires: 'complete'
},
});
player.load(await (await fetch('/javascript-progress-ring.exode')).json());
player.play();Inputs
| Input | Type | Default | Range |
|---|---|---|---|
progress | Number | 45 | 0 – 100 |
file | Text | brand-assets.zip | — |
accent | Text | #8b5cf6 | hex colour |
accent2 | Text | #06b6d4 | hex colour |
bg | Text | #0b0b12 | hex colour |
Events: complete
More JavaScript animations
Segmented Ring SpinnerTwelve segments in a ring with a rotating bright head and fading tail: the classic activity spinner.Terminal Typing EffectA terminal that types commands with human rhythm, prints their output and loops through a script.Scroll Reveal TimelineA timeline whose line draws with scroll progress while milestone cards slide in from alternating sides.Particle TextHundreds of particles that assemble into a word, scatter from the cursor and spring back.Curtain Wipe TransitionStaggered curtain panels sweep across, the page swaps underneath and the curtains pull away.Magnetic Confetti ButtonA button that leans toward the cursor like a magnet and bursts into spinning confetti on click.
The same idea in other frameworks: React orbit loader · Flutter bouncing bars loader · Flutter stepped progress bar