Bootstrap Border spinner

bootstrap page loading spinner
bootstrap page loading spinner
Bootstrap page loading spinner

We use bootstrap Border spinner for showing Bootstrap loading effect in website, Bootstrap Spinner just build with simple html and css there are no use of javascript.

You have to use javascript where toggle their visibility.

Border Spinner

<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>

Bootstrap Spinner Colors

We can create multicolor bootstrap spinner, we can add any bootstrap color to bootstrap spinner.

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

Growing spinner

In Bootstrap here are many kind of spinner, here i am going to tell you about growing spinner.

<div class="spinner-grow" role="status">
    <span class="sr-only">Loading...</span>
</div>

Growing spinner Colors

We can create multicolor Growing spinner, we can add any bootstrap color to bootstrap spinner.

<div class="spinner-grow text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
  <span class="sr-only">Loading...</span>
</div>
Bootstrap Examples
CSS Tricks

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Ajay srivastav Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Ajay srivastav
Guest

Veri nice article ….