Spinners

spinners

.slds-spinner — Spinners are CSS loading indicators that should be shown when retrieving data or performing slow computations. In some cases, the first time a parent component loads, a stencil is preferred to indicate network activity.

base

.slds-spinner

base › Inlined

base › Without Container

base › With Container

base › Fixed Container

base › On inverse background

base › With 300ms delay

base › With brand colors

base › Size Xx-Small

base › Size X-Small

base › Size Small

base › Size Medium

base › Size Large

base › RTL support - Size Xx-Small

base › RTL support - Size X-Small

base › RTL support - Size Small

base › RTL support - Size Medium

base › RTL support - Size Large

.slds-spinner_inline

.slds-spinner_inline — Returns the spinner back into the document flow

.slds-spinner__dot-a

.slds-spinner__dot-a — This creates two of the circles

.slds-spinner__dot-b

.slds-spinner__dot-b — This creates two of the circles

.slds-spinner_delayed

.slds-spinner_delayed — Set a delay of 300ms on spinner

.slds-spinner_brand

.slds-spinner_brand — This creates the blue brand spinner

.slds-spinner_inverse

.slds-spinner_inverse — This creates the inverse spinner

.slds-spinner_xx-small

.slds-spinner_xx-small — This is the extra extra small spinner

.slds-spinner_x-small

.slds-spinner_x-small — This is the extra small spinner

.slds-spinner_small

.slds-spinner_small — This is the small spinner

.slds-spinner_medium

.slds-spinner_medium — This is the medium spinner

.slds-spinner_large

.slds-spinner_large — This is the large spinner