Spinners

Loading states and indicator widgets used across patient registries, lab data fetch pipelines, and medical form submit buttons.

Border & Growing Spinners

Border Spinner (Rotational)

Growing Spinner (Pulse)

Contextual Colors

Border Spinner Colors

Growing Spinner Colors

Sizing Variations

Vary sizing using predefined class modifiers such as .spinner-xs, .spinner-border-sm, or .spinner-xl.

Buttons with Spinners

Integrate loading indicators inside submit buttons to block secondary operations during save registry queries.

Fetching Clinic Databases...

Alignment & Loading Overlays

Alignment can be done easily via flex utilities such as justify-content-center. Click the "Simulate API Load" button at the top-right corner to see a full blur card loader overlay with an extra large spinner.

Left Aligned (Default)

Center Aligned (justify-content-center)

Right Aligned (justify-content-end)