<!-- Basic Spinner -->
    <div class="spinner-border" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
    

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

<!-- Custom Spinners -->
    <div class="spinner-border text-primary me-2 border-dashed" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
    <hr>
    <div class="spinner-border text-secondary me-2 border-dotted" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
    <hr>
    <div class="spinner-border text-success me-2 border-double" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
    <hr>
    <div class="spinner-border text-danger me-2 border-right-success" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
    <hr>
    <div class="spinner-border text-warning me-2 border-right-light" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
    

Following this css variables add more or customize your tooltip custom background according to color variable list in _variables.scss file.

    // Spinners
    .spinner-border {
        // Custom border style
        &.border-dashed {
            border-style: dashed;
        }
        &.border-dotted {
            border-style: dotted;
        }
        &.border-double {
            border-style: double;
        }
    
        // Custom border-right color
        &.border-right-primary {
            border-right-color: $primary;
        }
        &.border-right-secondary {
            border-right-color: $secondary;
        }
        &.border-right-success {
            border-right-color: $success;
        }
        &.border-right-info {
            border-right-color: $info;
        }
        &.border-right-warning {
            border-right-color: $warning;
        }
        &.border-right-danger {
            border-right-color: $danger;
        }
        &.border-right-orange {
            border-right-color: $orange;
        }
        &.border-right-dark {
            border-right-color: $dark;
        }
        &.border-right-light {
            border-right-color: $light;
        }
        &.border-right-white {
            border-right-color: $white;
        }
    }
    

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

<!-- Size -->
    <div class="spinner-border spinner-border-sm text-warning me-2" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
    <div class="spinner-grow spinner-grow-sm text-info" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
    
    <hr>
    
    <div class="spinner-border text-primary me-2" style="width: 3rem; height: 3rem;" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
    <div class="spinner-grow text-danger" style="width: 3rem; height: 3rem;" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
    

<!-- Inside Button -->
    <button class="btn btn-light" type="button">
        <span class="spinner-border spinner-border-sm text-danger" role="status" aria-hidden="true"></span>
    </button>
    <button class="btn btn-secondary" type="button">
        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
        Loading...
    </button>
    
    <hr>
    
    <button class="btn btn-success" type="button">
        <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
    </button>
    <button class="btn btn-warning" type="button" disabled>
        <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
        Loading...
    </button>