Sakuga Back to Sakuga
Theme
Sound
Jump to a component

AniCanonKit · AniCanon™

AniCanon™ Loader

AniCanon™'s loader is its mark: the ring traces once around in the accent while the crescent and the moon dot stay exactly where the logo has them. Never move the crescent or the moon dot. Use it on AniCanon™'s own surfaces where something is generating: card status bars, Activity rows, look plates, stages. Built only from core tokens; it lives in AniCanonKit, not the core, whose Loader is Sakuga's own.

@anicanon/sakuga/anicanonkitv1.0Used onWeb · iOS · AndroidFrom AniCanon™

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Coming soon

AniCanon™ 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

AniCanon™ 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
Generation on AniCanon™'s own surfaces: a card's status bar, an Activity row, a look plate being drawn, the running stage.
Not for
  • Plain loading in a drop zone, a frame or a buttonLoader
  • Work whose share done is knownProgress
  • A job's stages in orderStages

Guidelines

AniCanon™ Loader

On media surfaces the mark follows the text colour, so it stays light on dark art.

Reduced motion: the arc stops and the mark stays visible as a static logo.

Sakuga.Loader used to draw this mark; it is now the core loader. Boards that should show AniCanon™'s mark use AniCanonKit.Loader.

AniCanonLoaderExample.jsxReact
import { Loader } from '@anicanon/sakuga/anicanonkit';

export default function AniCanonLoaderExample() {
  return (
    <>
      <Loader size={16} label="Loading" />
      <Loader size={24} label="Loading" />
      <Loader size={40} label="Drawing the portrait" />
      <Loader size={16} label="Drawing the portrait" />
      Drawing the portrait
    </>
  );
}

PropsAniCanonLoaderProps

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
AniCanonLoaderExample.swiftiOS · coming soon
AniCanonLoaderExample.ktAndroid · coming soon

Tokens: --loader-arc (accent), --loader-mark (currentColor), --loader-track-opacity (.2).

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

mark-loader-track-stroke-width
its own value
8
mark-loader-arc-stroke-width
its own value
8
mark-loader-arc-dasharray
its own value
72 205

Motion

mark-loader-arc-loader-trace-animation
its own value
sk-spin 1.4s cubic-bezier(.45,.05,.55,.95)

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 mark 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.