TRA SummitDesign System

Spinner

An indeterminate loading indicator for in-flight payments and pending lookups.

Sizes

LoadingLoadingLoadingLoading
<Spinner size="sm" className="text-primary" />
<Spinner size="md" className="text-primary" />
<Spinner size="lg" className="text-primary" />
<Spinner size="xl" className="text-primary" />

Accessible label

Authorizing paymentAuthorizing payment…
<Spinner size="md" label="Authorizing payment" className="text-primary" />

Custom color

Loading transactionsLoading members
<Spinner size="lg" className="text-accent" label="Loading transactions" />
<Spinner size="lg" className="text-ink-muted" label="Loading members" />