CogniSync
CogniSync Design System
Loading

Loading states

AI thinking steps (static example), Figma-aligned linear and circular determinate loaders on a slow 0→100 loop, and cloud save states. Open Playground for live thinking steps and interactive demos.

Thinking (AI)

Thinking steps

Active step uses the spinner; completed steps show a check. The list translates so the active row stays at the top.

Analyzing your request
Searching knowledge base
Drafting response

Linear progress

Determinate bar + percent

Uploading file

0%

Loops 0→100% over ~22s, holds briefly, then repeats (Figma linear progress).

Cloud save

Auto-save status
Saved
No connection

Circular

Determinate ring (32px)

Arc grows with the same slow 0→100 cycle as linear progress. Indeterminate spinners still appear in thinking rows and cloud sync (Figma circular loading).