Skip to content
Native Animation
Orbit Chase Loader animation preview
LoaderProgressSkiaOrbitParticles

react native loading animation

Orbit Chase Loader

A characterful orbital loader where a bright comet chases a blinking star around a dimensional ring.

$9 for this animation

Add to your project

Copy the component and its assets into your app with the Native Animation CLI, or paste the agent prompt into Claude Code, Codex or Cursor once the MCP server is connected.

npx nativeanimation add orbit-chase-loader

About this animation

A React Native loading animation can carry real progress while remaining playful enough to give a product its own voice. This Skia scene sends a bright comet after a blinking star around an inclined dimensional ring, with an 18-position trail and depth-aware scaling. Use it for uploads, workspace preparation, generated content, game transitions, or any process that can be determinate or indeterminate. A Reanimated frame callback advances both characters, trims the ring when progress is supplied, and stages a dedicated finish: the comet catches the star, merges into it, and releases ten sparks. Customize scene size, labels, colors, typography, progress, completion state, and callback, or restart and complete the sequence through its ref.

When to use it

  • Display determinate upload or preparation progress.
  • Run an indeterminate loader when progress is unknown.
  • Give game or content transitions a playful identity.
  • Finish a loading flow with a catch-and-spark moment.

A characterful orbital loader where a bright comet chases a blinking star around a dimensional ring.

Why this one

This loader goes beyond a looping illustration: every shape is drawn in Skia, the comet leaves a real 18-position trail, the characters change scale with orbital depth, and the ring is occluded in front and behind them. It also supports real progress and finishes with a purpose-built catch-and-spark celebration.

How it works

  1. A frame callback advances the comet at one revolution every 2.6 seconds and simulates the star on the same inclined ellipse.
  2. When the angular gap drops below 25 degrees, a damped speed boost lets the star escape before settling back to cruising speed.
  3. The latest 18 comet positions live in one shared history value and render as progressively smaller, fainter Skia circles.
  4. Separate back and front paths create the orbital ring's depth, while sine-based character scaling reinforces which side of the planet is closest.
  5. Determinate progress trims both ring halves. Without progress, the same ring cycles continuously as an indeterminate indicator.
  6. done closes the angular gap in 500 ms, fades the comet into the star, and emits ten radial sparks before calling onDoneAnimationEnd.

Install

npx expo install @shopify/react-native-skia react-native-reanimated react-native-worklets

For Skia on web, follow Expo's Skia setup so CanvasKit is available to the bundler.

Usage

import OrbitChaseLoader from './OrbitChaseLoader';

export function LoadingState() {
  return <OrbitChaseLoader />;
}

Use real progress, custom colors, and the completion callback:

<OrbitChaseLoader
  size={280}
  progress={uploadProgress}
  done={uploadProgress === 1}
  label="Preparing"
  colors={{
    planet: '#6E56FF',
    ring: '#D9D1FF',
    star: '#FFCC33',
    comet: '#42DCF5',
    text: '#17132F',
  }}
  fontFamily="YourSansFont"
  onDoneAnimationEnd={openWorkspace}
/>

The forwarded ref exposes restart() and complete() for imperative flows.

Props

PropTypeDefaultDescription
sizenumber220Width of the animated scene in points.
progressnumber—Determinate progress from 0 to 1; omit for indeterminate mode.
donebooleanfalseTriggers the catch-and-spark completion.
labelstring'Loading'Text shown below the orbit.
colorsOrbitChaseLoaderColorsViolet themeColors for the planet, ring, star, comet, and text.
fontFamilystringSystem fontFont used by the loading line.
onDoneAnimationEnd() => void—Called after the completion celebration.
styleStyleProp<ViewStyle>—Outer-container style.
testIDstring—Test identifier for the outer container.

Compatibility

  • Expo SDK 57
  • React Native 0.86
  • Reanimated 4.5, Worklets 0.10, and Skia 2.6
  • iOS: supported, not yet verified on a device
  • Android: supported, not yet verified on a device
  • Web: supported, pending visual verification
  • Works in Expo Go because Skia, Reanimated, and Worklets are included in this project's SDK runtime

Accessibility

The component exposes a labeled progress indicator with a percentage in determinate mode and a textual loading state in indeterminate mode. Reduced Motion slows the orbit, removes the comet trail, keeps the progress readable, and completes without the chase or particle burst.

FAQ

Can the orbit loader show real progress?
Yes. Pass a value from 0 to 1 to trim both halves of the ring. Omit progress for a continuously cycling indeterminate indicator.
What happens when the loading animation finishes?
Set done or call complete through the ref. The angular gap closes over 500 ms, the comet fades into the star, ten radial sparks appear, and onDoneAnimationEnd runs afterward.
Is the orbit chase loader verified on every platform?
No. iOS, Android, and web are listed as supported but remain unverified. Reduce Motion slows the orbit, removes the trail, and completes without the chase or particle burst.

More animations