How To Design A Spinners In Bootstrap

Posted By Bajarangi soft , Posted On 01-10-2020

In bootstrap, spinners are useful to indicate the loading state of the component or page in our applications,To create a spinner/loader, use the .spinner-border class: Use any text color utilites to add a color to the spinner:

1.Colored and Different style Spinners In Bootstrap

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
    <h2>Colored Spinners</h2>
    <p>Use any <strong>text color utilites</strong> to add a color to the spinner:</p>

    <div class="spinner-border text-muted"></div>
    <div class="spinner-border text-primary"></div>
    <div class="spinner-border text-success"></div>
    <div class="spinner-border text-info"></div>
    <div class="spinner-border text-warning"></div>
    <div class="spinner-border text-danger"></div>
    <div class="spinner-border text-secondary"></div>
    <div class="spinner-border text-dark"></div>
    <div class="spinner-border text-light"></div>
</div>

<div class="container">
    <h2>Growing Spinners</h2>
    <p>Use the <code>.spinner-grow</code> class if you want the spinner/loader to grow instead of "spin":</p>

    <div class="spinner-grow text-muted"></div>
    <div class="spinner-grow text-primary"></div>
    <div class="spinner-grow text-success"></div>
    <div class="spinner-grow text-info"></div>
    <div class="spinner-grow text-warning"></div>
    <div class="spinner-grow text-danger"></div>
    <div class="spinner-grow text-secondary spinner-border-sm"></div>
    <div class="spinner-grow text-dark spinner-border-sm "></div>
    <div class="spinner-grow text-light spinner-grow-sm"></div>
</div>
<div class="container">
    <h2>Spinner Buttons</h2>
    <p>Add spinners to buttons:</p>

    <button class="btn btn-primary">
        <span class="spinner-border spinner-border-sm"></span>
    </button>

    <button class="btn btn-primary">
        <span class="spinner-border spinner-border-sm"></span>
        Loading..
    </button>

    <button class="btn btn-primary" disabled>
        <span class="spinner-border spinner-border-sm"></span>
        Loading..
    </button>

    <button class="btn btn-primary" disabled>
        <span class="spinner-grow spinner-grow-sm"></span>
        Loading..
    </button>
</div>
</body>
</html>