On click, the button transitions through three states: idle (padlock icon) → loading (spinning SVG arc, 1.6s) → done (checkmark, green). Auto-resets to idle after 2 seconds. Each state has distinct icon, label, and colour scheme.
Create a button with a three-state loading sequence: idle → loading → done. On click (idle only): - Set state to 'loading': show spinning SVG arc + "UNLOCKING…" label - After 1.6s: set state to 'done': show checkmark + "UNLOCKED" in green - After 2s more: reset to 'idle': show padlock SVG + "UNLOCK" Each state has distinct icon (SVG), label text, and button colour/border. Spinner: CSS keyframe rotating a partial SVG circle stroke. Disable spinner rotation under prefers-reduced-motion. No library dependencies.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.