Show an indeterminate loading state using the same loader-circle icon as the reference, spun with Bootstrap's own animation.
Use .spinner-border or .spinner-grow for indeterminate loading: work is happening, but completion cannot be measured as a percentage. Render it with role="status" or an accessible loading label, and pair it with visible text when the wait affects surrounding content.
.spinner-border
.spinner-grow
role="status"
Bootstrap spinners are built with HTML and CSS, use currentColor, and do not need JavaScript to animate. Use utilities to align, recolor, or size them, and use the small variant inside buttons or dense inline controls.
currentColor
Use .progress instead when completion can be measured. When a spinner replaces a button label, disable the action while it is running and keep the label clear enough that users know what is still in progress.
.progress
A rotating loader-circle icon built from currentColor, so it adapts to any theme without extra CSS.
loader-circle
1 2 3 4<div class="spinner" role="status"> <i class="lucide lucide-loader-circle" data-icon="inline-start" aria-hidden="true"></i> <span class="visually-hidden">Loading</span> </div>
<div class="spinner" role="status"> <i class="lucide lucide-loader-circle" data-icon="inline-start" aria-hidden="true"></i> <span class="visually-hidden">Loading</span> </div>
Set size="sm" to use inside compact contexts like buttons.
size="sm"
1 2 3 4<div class="spinner spinner-sm" role="status"> <i class="lucide lucide-loader-circle" data-icon="inline-start" aria-hidden="true"></i> <span class="visually-hidden">Loading</span> </div>
<div class="spinner spinner-sm" role="status"> <i class="lucide lucide-loader-circle" data-icon="inline-start" aria-hidden="true"></i> <span class="visually-hidden">Loading</span> </div>
Set loading=true on a button to swap its leading icon for a spinner.
loading=true
1 2 3 4 5 6 7 8 9 10<div class="d-flex gap-2"> <button class="btn btn-primary" type="button" disabled aria-busy="true"> <i class="lucide lucide-loader-circle" data-icon="inline-start" aria-hidden="true"></i> Loading... </button> <button class="btn btn-outline-secondary" type="button" disabled aria-busy="true"> <i class="lucide lucide-loader-circle" data-icon="inline-start" aria-hidden="true"></i> Please wait </button> </div>
<div class="d-flex gap-2"> <button class="btn btn-primary" type="button" disabled aria-busy="true"> <i class="lucide lucide-loader-circle" data-icon="inline-start" aria-hidden="true"></i> Loading... </button> <button class="btn btn-outline-secondary" type="button" disabled aria-busy="true"> <i class="lucide lucide-loader-circle" data-icon="inline-start" aria-hidden="true"></i> Please wait </button> </div>
Use the same loading row translated exactly into Arabic, Hebrew, and English; the spinner itself has no directional geometry, so only the label and its order change.
1 2 3 4 5 6 7<div class="d-flex align-items-center gap-2" dir="rtl"> <div class="spinner" role="status"> <i class="lucide lucide-loader-circle" data-icon="inline-start" aria-hidden="true"></i> <span class="visually-hidden">جارٍ تحميل التحديثات</span> </div> <span>جارٍ تحميل التحديثات</span> </div>
<div class="d-flex align-items-center gap-2" dir="rtl"> <div class="spinner" role="status"> <i class="lucide lucide-loader-circle" data-icon="inline-start" aria-hidden="true"></i> <span class="visually-hidden">جارٍ تحميل التحديثات</span> </div> <span>جارٍ تحميل التحديثات</span> </div>
1 2 3 4 5 6 7<div class="d-flex align-items-center gap-2" dir="rtl"> <div class="spinner" role="status"> <i class="lucide lucide-loader-circle" data-icon="inline-start" aria-hidden="true"></i> <span class="visually-hidden">טוען עדכונים</span> </div> <span>טוען עדכונים</span> </div>
<div class="d-flex align-items-center gap-2" dir="rtl"> <div class="spinner" role="status"> <i class="lucide lucide-loader-circle" data-icon="inline-start" aria-hidden="true"></i> <span class="visually-hidden">טוען עדכונים</span> </div> <span>טוען עדכונים</span> </div>
1 2 3 4 5 6 7<div class="d-flex align-items-center gap-2" dir="ltr"> <div class="spinner" role="status"> <i class="lucide lucide-loader-circle" data-icon="inline-start" aria-hidden="true"></i> <span class="visually-hidden">Loading updates</span> </div> <span>Loading updates</span> </div>
<div class="d-flex align-items-center gap-2" dir="ltr"> <div class="spinner" role="status"> <i class="lucide lucide-loader-circle" data-icon="inline-start" aria-hidden="true"></i> <span class="visually-hidden">Loading updates</span> </div> <span>Loading updates</span> </div>
For Bootstrap's source behavior and reduced-motion handling, see the Bootstrap Spinners documentation.
No matching pages.
Restore the default appearance.