Levels

Areas

Sections

/

Spinners

Border spinner

BS5SpinnerBorder(["role":"status"], 
      H5Span(["visually-hidden"], "Loading..."))

Growing spinner

BS5SpinnerGrow(["role":"status"], 
      H5Span(["visually-hidden"], "Loading..."))

Colors Border

Colors Grow

Sizing Border

BS5SpinnerBorder(["spinner-border-sm"], ["role":"status"], 
      H5Span(["visually-hidden"], "Loading...")),
    BS5SpinnerBorder(["role":"status"], 
      H5Span(["visually-hidden"], "Loading...")),
    BS5SpinnerBorder(["role":"status", "style":"width: 3rem; height: 3rem;"], 
      H5Span(["visually-hidden"], "Loading..."))

Sizing Grow

BS5SpinnerGrow(["spinner-grow-sm"], ["role":"status"], 
      H5Span(["visually-hidden"], "Loading...")),
    BS5SpinnerGrow(["role":"status"], 
      H5Span(["visually-hidden"], "Loading...")),
    BS5SpinnerGrow(["role":"status", "style":"width: 3rem; height: 3rem;"], 
      H5Span(["visually-hidden"], "Loading..."))

Alignment

Margin

Flex

Loading...

Float

Text align