JavaScript animation example
JavaScript Loading Spinner: Segmented Ring Animation
The classic segmented spinner, the one macOS and iOS used for years, is still the clearest way to say "working". Twelve rounded segments sit in a ring and a bright head travels around it, leaving a fading tail. It runs in plain JavaScript through the vanilla runtime, so it works in any page or framework.
- 3.9 KB file
- 4 live inputs
- JavaScript runtime
How this segmented ring spinner works
- Segment brightness is based on how far it is behind the travelling head, which gives the comet tail.
- Segment count, thickness and speed are inputs; the ring rescales to any container.
- Hovering slows it down, a small touch that makes it feel responsive.
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-loading-spinner" style="width: 100%; height: 420px"></canvas>
const player = new ExodeUICanvas({
element: '#javascript-loading-spinner',
fit: 'Layout',
onReady: (engine) => { },
});
player.load(await (await fetch('/javascript-loading-spinner.exode')).json());
player.play();Inputs
| Input | Type | Default | Range |
|---|---|---|---|
segments | Number | 12 | 6 – 24 |
speed | Number | 1 | 0.2 – 3 |
accent | Text | #e5e7eb | hex colour |
bg | Text | #111113 | hex colour |
More JavaScript animations
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.Blob Cursor LinksA blob cursor that stretches with speed and swells over links whose underlines draw in and out.
The same idea in other frameworks: React orbit loader · Flutter bouncing bars loader · SwiftUI activity rings loader