Loader with logo

Updated 2026-05-19

Confidence anatomy medium variants high motion high a11y high content medium

Overview

Indicates a background process is active. Use loader with logo in transition between apps or logging in or out to reduce perceived wait time

1
Container
the bounding surface — typically a status region or live region
2
Status icon
glyph + color reinforcing severity (info, success, warning, error)
3
Title (optional)
short headline summarizing the message
4
Message
the body content explaining what happened and (if applicable) what to do
5
Action (optional)
primary action — retry, undo, dismiss, view details
6
Dismiss control (optional)
explicit close affordance for transient feedback

transient feedback follows the toast enter/exit timing curve

loader-with-logo + loading-skeleton inherit the skeleton pulse cadence

severity transitions (e.g. error → success) cross-fade rather than swap