React animation example
React Loader Animation: Orbit Spinner Component
Most React spinners are a rotating border. This loader puts three dots on a shared orbit, each lagging the one before it, so the motion reads as momentum instead of a mechanical spin. A progress input drives the percentage in the middle, so the same component works as an indeterminate spinner or a determinate loader.
- 4.3 KB file
- 6 live inputs
- React runtime
How this orbit loader works
- Each dot follows the same angle with a phase delay, and its trail is the last 18 positions drawn with falling opacity.
- Set progress from 0 to 100 to show a determinate loader; leave it at -1 for an endless spinner.
- Clicking the loader fires a "complete" event your React code can listen to with onTrigger.
Add it to your React app
Install exodeui, download the file below, and paste this. The code updates as you customize. Other runtimes are in the other tabs.
import { ExodeUICanvas } from 'exodeui';
// react-loader.bexode goes in /public (download it below)
export function ReactLoader() {
return (
<ExodeUICanvas
src="/react-loader.bexode"
fit="Layout"
autoPlay
interactive
onTrigger={(name) => {
// fires: 'complete'
}}
style={{ width: '100%', height: 440 }}
/>
);
}Inputs
| Input | Type | Default | Range |
|---|---|---|---|
progress | Number | -1 | -1 – 100 |
label | Text | Loading assets | — |
speed | Number | 1 | 0.2 – 3 |
accent | Text | #7c5cff | hex colour |
accent2 | Text | #22d3ee | hex colour |
bg | Text | #0b0b12 | hex colour |
Events: complete
More React animations
Depth Parallax SceneFive depth layers of mountains and sky that shift with the cursor at different speeds.Scramble TextA headline that decodes from random glyphs letter by letter; click to scramble to the next phrase.Shared Element TransitionA card grid where the tapped card springs into a full detail page and back: a shared element transition.Liquid Fill ButtonA button that fills with a liquid wave on hover and morphs into a checkmark on click.Like Heart IconA heart icon that squashes, pops and bursts into particles when liked, with a live counter.3D Flip CardA two-sided card that flips in 3D on a spring, with a sliding highlight and hover tilt.
The same idea in other frameworks: Flutter bouncing bars loader · SwiftUI activity rings loader · JavaScript segmented ring spinner