Sakuga Back to Sakuga
Theme
Sound
Jump to a component

Core · Feedback

Loader

Sakuga's loader is a ball bouncing on twos, the first exercise every animator draws. Nine drawings, each held for two frames at 24 fps, with the top held twice. The spacing is tight at the top and wide near the ground, the ball stretches as it falls and squashes on contact, and the drawing before shows through as an onion skin. Use it anywhere something is being made or loading: a busy drop zone, a stage, a frame waiting for its picture, a button.

@anicanon/sakuga/uiv1.0Used onWeb · iOS · Android

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Coming soon

Loader for iOS is in the roughs. The tokens it will read are the ones on this page, the same on every platform.

Android

Coming soon

Loader for Android is in the roughs. The tokens it will read are the ones on this page, the same on every platform.

Use it for
Something being made or loading whose length is unknown: a busy drop zone, a frame waiting for its picture, a button.
Not for

Guidelines

One bounce takes 0.75 s (18 frames), held on twos, with a hard cut between drawings and no easing. The ball and its onion skin take the accent (load-accent). The ground follows the text colour, so over dark art it stays light.

With reduced motion, the ball rests at the top of its arc.

AniCanon™'s own loader, its mark with the ring tracing round it, is AniCanonKit.Loader.

LoaderExample.jsxReact
import { Loader } from '@anicanon/sakuga/ui';

export default function LoaderExample() {
  return (
    <>
      <Loader size={16} label="Loading" />
      <Loader size={24} label="Loading" />
      <Loader size={48} label="Drawing the portrait" />
      <Loader size={72} label="Drawing the portrait" />
      <Loader size={16} label="Loading the pages" />
      Loading the pages
    </>
  );
}

PropsLoaderProps

size
number | stringDefault 24
Pixels, or a size token such as 'var(--button-icon-size)'.
label
stringDefault "Loading"
Announced to screen readers.
className
string
style
CSSProperties
LoaderExample.swiftiOS · coming soon
LoaderExample.ktAndroid · coming soon

Each token reads a role, and the role lands on a value in each theme. Change the role and every component that reads it follows.

Space and shape

loader-arc
accent
#f4779f
loader-mark
its own value
currentColor
loader-track-opacity
opacity-dim
0.2
loader-onion-opacity
opacity-dim
0.2
loader-ground-stroke-width
its own value
5
loader-ground-opacity
opacity-disabled
0.35

Checked automatically with axe-core 4.11.4 against WCAG 2.2 A and AA, on the live preview above, in light and dark, on 26 October 2026.

Result
No issues found, in light or in dark.
By design
Not focusable. When it appears it says its label (default "Loading") once through the page's live region, unless it sits in a button, a link or a card, and in place it reads as a status of that name; the drawing is hidden.
Not tested
The automated check doesn't test keyboard use, focus order or what a screen reader says. The lines above are the design system's own account of them.