Logo Logo Logo Logo
Ready to Begin Your Journey?

Explore our resources to kickstart your experience!

Documentation

Apps

Pages

Authentication & Error

Ready to Begin Your Journey?

Explore our resources to kickstart your experience!

Apps

Pages

Authentication & Error

Help & Support

Notification 4
Item Back in Stock

Today, 02:45 PM

Good news! The item you wanted is back in stock. Grab it before it’s gone again!
Donald liked your post

Friday, 11:29 PM

Birthday Reminder

Tuesday, 02:45 PM

Don’t forget! It’s Emily birthday tomorrow. Send them a message!
Richard followed you

Monday, 07:14 AM

Daniel invited you to join Website Redesign

Thursday, 5:10 PM

Paul Danielle

paul@fabkin.com

Spinner
Colors Spinner

The border spinner uses currentColor for its border-color, meaning you can customize the color with text color utilities. You can use any of our text color utilities on the standard spinner.

<div class="spinner-border text-primary" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
Growing spinner

If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow!

<div class="spinner-grow text-primary" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
Button spinner

Use spinners within buttons to indicate an action is currently processing or taking place. 

<div class="d-flex flex-wrap align-items-center gap-3">
    <button class="btn btn-primary icon-btn" type="button" disabled>
        <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
        <span class="visually-hidden" role="status">Loading...</span>
    </button>
    <button class="btn btn-primary text-primary bg-primary-subtle" type="button" disabled>
        <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
        <span class="ms-1" role="status">Loading...</span>
    </button>
</div>
<div class="d-flex flex-wrap align-items-center gap-3">
    <button class="btn btn-danger icon-btn" type="button" disabled>
        <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
        <span class="visually-hidden" role="status">Loading...</span>
    </button>
    <button class="btn btn-danger text-danger bg-danger-subtle" type="button" disabled>
        <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
        <span class="ms-1" role="status">Loading...</span>
    </button>
</div>
<div class="d-flex flex-wrap align-items-center gap-3">
    <button class="btn btn-success icon-btn" type="button" disabled>
        <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
        <span class="visually-hidden" role="status">Loading...</span>
    </button>
    <button class="btn btn-success text-success bg-success-subtle" type="button" disabled>
        <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
        <span class="ms-1" role="status">Loading...</span>
    </button>
</div>
Spinner Sizes

Use spinners within buttons to indicate an action is currently processing or taking place. 

<div class="d-flex flex-wrap align-items-center gap-5">
    <div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
    <div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
</div>
<div class="d-flex flex-wrap align-items-center gap-5 ps-5">
    <div class="spinner-border spinner-border-sm" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
    <div class="spinner-grow spinner-grow-sm" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
</div>
Theme Customization

it's time to style according to your choice ..!

Layout

Choose your layout

Vertical
Horizontal
Semi Box
Content Width:
Default
Box
Layout Direction:
RTL
LTR
Layout Mode:
Light
Dark
System
Sidebar Size:
Default
Icon
Sidebar Color:
Light
Dark