bootstrap 旋转特效

<!--旋转特效-->

<div class="container">
    <h2 class="my-5">旋转特效</h2>
    <div class="spinner-border"></div>
    <div class="spinner-border text-success"></div>
    <div class="spinner-border text-info"></div>
    <div class="spinner-border text-danger"></div>
    <div class="spinner-border text-warning"></div>


    <br>
    <br>

    <div class="spinner-grow"></div>
    <div class="spinner-grow text-success"></div>
    <div class="spinner-grow text-info"></div>
    <div class="spinner-grow text-danger"></div>
    <div class="spinner-grow text-warning"></div>


    <br>
    <br>

    <div class="spinner-grow p-5"></div>
    <div class="spinner-grow text-success p-5"></div>
    <div class="spinner-grow text-info p-4"></div>
    <div class="spinner-grow text-danger p-3"></div>
    <div class="spinner-grow text-warning"></div>

    <br>
    <br>
    <div class="text-center">
        <div class="spinner-border"></div>

    </div>


    <br>
    <br>

    <div>
        <button class="btn btn-success" disabled>
            <div class="spinner-border spinner-border-sm"></div>
            <span class="m-1">loading</span>
        </button>
    </div>
</div>