Synto - Laravel Bootstrap 5 Premium Admin & Dashboard Template

Basic Spinner

<div class="spinner-border text-primary" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>

Spinner Sizes

<div class="spinner-border  text-primary spinner-border-sm me-4" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
    <div class="spinner-border  text-primary me-4" style="width: 3rem; height: 3rem;"
        role="status">
        <span class="visually-hidden">Loading...</span>
    </div>

Color variants 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-default" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>

Basic Growing Spinner

<div class="spinner-grow text-primary" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>

Growing Spinner Sizes


    <div class="spinner-grow   text-primary spinner-grow-sm me-4" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
    <div class="spinner-grow  text-primary" style="width: 3rem; height: 3rem;" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>

Colored Growing Spinner

<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-default" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>

Loading Buttons

<div class="btn-list">
        <button class="btn btn-primary op-7" type="button" disabled>
            <span class="spinner-border spinner-border-sm align-middle" role="status"
                aria-hidden="true"></span>
            <span class="visually-hidden">Loading...</span>
        </button>
        <button class="btn btn-primary op-7" type="button" disabled>
            <span class="spinner-border spinner-border-sm align-middle" role="status"
                aria-hidden="true"></span>
            Loading...
        </button>
        <button class="btn btn-secondary op-7" type="button" disabled>
            <span class="spinner-border spinner-border-sm align-middle" role="status"
                aria-hidden="true"></span>
            <span class="visually-hidden">Loading...</span>
        </button>
        <button class="btn btn-secondary op-7" type="button" disabled>
            <span class="spinner-border spinner-border-sm align-middle" role="status"
                aria-hidden="true"></span>
            Loading...
        </button>
        <button class="btn btn-warning op-7" type="button" disabled>
            <span class="spinner-border spinner-border-sm align-middle" role="status"
                aria-hidden="true"></span>
            <span class="visually-hidden">Loading...</span>
        </button>
        <button class="btn btn-warning op-7" type="button" disabled>
            <span class="spinner-border spinner-border-sm align-middle" role="status"
                aria-hidden="true"></span>
            Loading...
        </button>
        <button class="btn btn-danger op-7" type="button" disabled>
            <span class="spinner-border spinner-border-sm align-middle" role="status"
                aria-hidden="true"></span>
            <span class="visually-hidden">Loading...</span>
        </button>
        <button class="btn btn-danger op-7" type="button" disabled>
            <span class="spinner-border spinner-border-sm align-middle" role="status"
                aria-hidden="true"></span>
            Loading...
        </button>
        <button class="btn btn-info op-7" type="button" disabled>
            <span class="spinner-border spinner-border-sm align-middle" role="status"
                aria-hidden="true"></span>
            <span class="visually-hidden">Loading...</span>
        </button>
        <button class="btn btn-info op-7" type="button" disabled>
            <span class="spinner-border spinner-border-sm align-middle" role="status"
                aria-hidden="true"></span>
            Loading...
        </button>
        <button class="btn btn-success op-7" type="button" disabled>
            <span class="spinner-border spinner-border-sm align-middle" role="status"
                aria-hidden="true"></span>
            <span class="visually-hidden">Loading...</span>
        </button>
        <button class="btn btn-success op-7" type="button" disabled>
            <span class="spinner-border spinner-border-sm align-middle" role="status"
                aria-hidden="true"></span>
            Loading...
        </button>
    </div>

Customized description Spinner

Attention needed

Holy guacamole! You should check in on some of those fields below.

<div class="alert alert-primary border border-primary mb-0 p-2">
        <div class="d-flex align-items-start">
            <div class="me-2">
                <svg class="h-4 w-4 text-primary mt-0.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z">
                    </path>
                </svg>
            </div>
            <div class="w-100">
                <div class="fw-semibold d-flex justify-content-between">Attention needed<button type="button" class="btn-close p-0" data-bs-dismiss="alert" aria-label="Close"><i class="bi bi-x"></i></button></div>
                <div class="fs-12 op-8 mb-1">Holy guacamole! You should check in on some of those fields below.</div>
                <div class="mt-2">
                        <a href="javascript:void(0);" class="text-primary fw-semibold text-decoration-underline me-4">Don't allow</a>
                        <a href="javascript:void(0);" class="text-primary fw-semibold text-decoration-underline">Allow</a>
                </div>
            </div>
        </div>
        <div class="spinner-border text-primary position-absolute" role="status">
    </div>;

Alignment Flex

<div class="d-flex justify-content-center mb-4">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
    <div class="d-flex align-items-center">
        <strong>Loading...</strong>
        <div class="spinner-border text-primary ms-auto" role="status" aria-hidden="true"></div>
    </div>

Alignment Float

<div class="clearfix mb-4">
        <div class="spinner-border text-primary float-end" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
    <div class="clearfix">
        <div class="spinner-border text-primary float-start" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>

Alignment Text center

<div class="text-center">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>

Alignment Margin

<div class="spinner-border text-primary m-5" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>

Switcher

Spinners