Bootstrap Spinners

In bootstrap spinners are used to show the state of loading. Bootstrap very easy and short script for spinners than other languages like JavaScript. These properties can easily customized.

Example of Spinner

In this example spinner-border is used to make to make simple bordered spinner. 

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

Output of above code

Contextual Spinners

In this example many contextual bootstrap classes are used to apply different background colors. 

<div class="spinner-border text-primary" 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-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-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>

Output of above code

Growing Spinner

In this example spinner-grow class is used to make a growing spinner. 

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

Output of above code

Contextual Spinner growing

In this example many contextual bootstrap classes are used to apply different background colors to growing spinners. 

<div class="spinner-grow text-primary" 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-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-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>

Output of above code

Spinner buttons

In this example all the spinners are inserted in the buttons. 

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="sr-only">Loading...</span>
</button>

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  <span class="sr-only">Loading...</span>
</button>

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

Output of above code







The Best

Comment here

If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.


Categories

Latest Posts

blog-image
New Courses
 March 18, 2020
blog-image
A great way to start
 March 21, 2020
blog-image
New Courses for you
 March 26, 2020
blog image
Start your training
 March 28, 2020