Sakuga Back to Sakuga
Theme
Sound
Jump to a component

Core · Feedback

Progress

Progress is how far something being made has come, as a line that fills in the accent.

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

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Coming soon

Progress 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

Progress 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
How far something being made has come, when the share done is known.
Not for
  • Work whose length is unknownLoader
  • The playhead of an episode or a shortScrubber
  • Where a person is in a flow they step throughStepper

Guidelines

  • value is 0 to 100; label names what is being made, for screen readers ("Rendering your take").
  • It sits under the words that say what is happening, never in place of them: a title, then the line, then what is held and when it lands.
  • tone="media" over art or video, so the track stays light on a dark picture.
  • A job with stages shows them with Stepper above the line; a job whose length is unknown uses Loader, not a line that never moves.
ProgressExample.jsxReact
import { Progress, Text } from '@anicanon/sakuga/ui';

export default function ProgressExample() {
  return (
    <>
      <Text variant="label">Rendering your take</Text>
      <Progress value={40} label="Rendering your take" />
      <Text variant="caption" tone="muted">
        12 fragments held · charged only if it is delivered
      </Text>
      <div
        data-theme="dark"
        style={{
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'flex-end',
          gap: 10,
          width: 320,
          height: 150,
          padding: 16,
          borderRadius: 12,
          boxSizing: 'border-box',
          background: 'url(/art/eba-cinema.webp) center/cover',
        }}
      >
        <Text variant="label" tone="on-media">
          Animating your clip
        </Text>
        <Progress value={65} tone="media" label="Animating your clip" />
      </div>
    </>
  );
}

PropsProgressProps

valuerequired
number
label
string
tone
'media'
className
string
ProgressExample.swiftiOS · coming soon
ProgressExample.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

progress-height
its own value
4px
progress-radius
radius-full
9999px
progress-fill-radius
radius-full
9999px
progress-forced-edge-width
line-hairline
1px

Motion

progress-fill-duration
motion-base
240ms
progress-fill-easing
ease-standard
cubic-bezier(0.2, 0, 0, 1)

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; a progress bar announced with its percent. Name it with label; without one it has no name. In forced colours the track keeps an edge and the fill takes Highlight.
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.