Use class .spinner-border for a lightweight loading indicator.

For customizing spinner with different colored options, use .text-{colorName} along with .spinner-border.

Use class .spinner-grow for a growing spinner.

For colored growing spinner, use .text-{color} along with .spinner-grow.

Use Flexbox utilities to place spinners. Use .d-flex and .align-items-{side}

You can also use .float-{left | right} to place your spinner left or right side.

You can also use .text-{side} as a wrapper class of .spinner-borderfor the spinner's placement.

Use .spinner-border-{sm/lg} and .spinner-grow-{sm/lg} for Small or Large spinner.

Use .spinner-border or .spinner-grow inside buttons to indicate an action is currently processing or taking place.

Loading... Loading... Loading... Loading...