My Blog

Spinners

Written by

saqibkhan

in

This chapter will discuss about Bootstrap spinners. Bootstrap spinner display the loading state of projects using .spinner class.

How it works

  • Bootstrap spinners show the loading state of a project, using HTML and CSS. JavaScript is not required to build them.
  • Custom JavaScript is needed to toggle their visibility. Appearance, alignment, and sizing can be easily customized with Bootstrap’s utility classes.
  • Each loader has role=”status” and a nested <span class=”visually-hidden”>Loading… </span > for accessibility.

Border spinner

Use .spinner-border class to create lightweight spinner/loading indicator.https://www.tutorialspoint.com/bootstrap/examples/spinners_border_spinners.php

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Spinners</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h3>Border Spinner</h3><div class="spinner-border mt-2" role="status"><span class="spinner-grow text-white spinner-grow-sm" role="status"></span><span class="visually-hidden"></span></div></body></html>

Colors

Border spinner uses currentColor for its border-color, which is customizable with text color utilities. Use text color utilities on a standard spinner.https://www.tutorialspoint.com/bootstrap/examples/spinners_color_spinners.php

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Spinners</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h3>Colored Spinner</h3><div class="spinner-border text-primary" role="status"><span class="visually-hidden"></span></div><div class="spinner-border text-secondary" role="status"><span class="visually-hidden"></span></div><div class="spinner-border text-success" role="status"><span class="visually-hidden"></span></div><div class="spinner-border text-danger" role="status"><span class="visually-hidden"></span></div><div class="spinner-border text-warning" role="status"><span class="visually-hidden"></span></div><div class="spinner-border text-info" role="status"><span class="visually-hidden"></span></div><div class="spinner-border text-light" role="status"><span class="visually-hidden"></span></div><div class="spinner-border text-dark" role="status"><span class="visually-hidden"></span></div></body></html>

Why not use border-color utilities? Border spinners have transparent border on one side, overridden by .border-{color} utilities.

Growing spinner

  • You can change the spin type of spinner to the grow spinner. It technically doesn’t rotate, but it repeatedly grows.
  • Use .spinner-grow class to create grow spinner.
https://www.tutorialspoint.com/bootstrap/examples/spinners_growing_spinners.php

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Spinners</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h3>Growing Spinner</h3><div class="spinner-grow" role="status"><span class="visually-hidden"></span></div></body></html>

This spinner uses currentColor to change its appearance with text color utilities.https://www.tutorialspoint.com/bootstrap/examples/spinners_growing_colors_spinners.php

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Spinners</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h3>Growing color Spinners</h3><div class="spinner-grow text-primary" role="status"><span class="visually-hidden"></span></div><div class="spinner-grow text-secondary" role="status"><span class="visually-hidden"></span></div><div class="spinner-grow text-info" role="status"><span class="visually-hidden"></span></div><div class="spinner-grow text-dark" role="status"><span class="visually-hidden"></span></div><div class="spinner-grow text-warning" role="status"><span class="visually-hidden"></span></div><div class="spinner-grow text-success" role="status"><span class="visually-hidden"></span></div><div class="spinner-grow text-light" role="status"><span class="visually-hidden"></span></div><div class="spinner-grow text-danger" role="status"><span class="visually-hidden"></span></div><div class="spinner-grow" role="status"><span class="visually-hidden"></span></div></body></html>

Alignment

Bootstrap spinners are designed with rems, currentColor, and display: inline-flex. They are easily resizable, recolorable, and alignable.

Margin

For simple spacing, use margin utilities like .m-4.https://www.tutorialspoint.com/bootstrap/examples/spinners_margin_spinners.php

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Spinners</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h3>Margin</h3><div class="spinner-border m-4" role="status"><span class="visually-hidden"></span></div></body></html>

Placement

Bootstrap spinners can be placed using flexbox utilities, float utilities, or text alignment utilities.

Flex

Use flexbox placement classes to set the position of spinners.https://www.tutorialspoint.com/bootstrap/examples/spinners_flex_palcement.php

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Spinners</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h5 class="text-center">Flex placement at start, center, end</h5><div class="d-flex justify-content-start"><div class="spinner-border" role="status"><span class="visually-hidden"></span></div></div><div class="d-flex justify-content-center"><div class="spinner-border" role="status"><span class="visually-hidden"></span></div></div><div class="d-flex justify-content-end"><div class="spinner-border" role="status"><span class="visually-hidden"></span></div></div></body></html>

You can change spinner alignment using flexbox placement.https://www.tutorialspoint.com/bootstrap/examples/spinners_flex.php

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Spinners</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="d-flex align-items-end mt-2"><h5 class="text-center">Flex placement</h5><div class="spinner-border ms-auto" role="status" aria-hidden="true"></div></div></body></html>

Float

Use float placement classees to set the position of spinners.https://www.tutorialspoint.com/bootstrap/examples/spinners_float_placement.php

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Spinners</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h5>Float placement at start and end</h5><div class="clearfix float-start mt-2"><div class="spinner-border" role="status"><span class="visually-hidden"></span></div></div><div class="clearfix float-end"><div class="spinner-border" role="status"><span class="visually-hidden"></span></div></div></body></html>

Text align

Use .text-align placement classes to set the position of spinners items.https://www.tutorialspoint.com/bootstrap/examples/spinners_text_align.php

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Spinners</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h5 class="text-center">Text Align at start, center, end</h5><div class="text-start"><div class="spinner-border" role="status"><span class="visually-hidden"></span></div></div><div class="text-center"><div class="spinner-border" role="status"><span class="visually-hidden"></span></div></div><div class="text-end"><div class="spinner-border" role="status"><span class="visually-hidden"></span></div></div></body></html>

Size

Spinner size can be used to create spinners of various sizes.

  • For small-size spinners, use .spinner-border-sm and .spinner-grow-sm classes.
  • For medium-size spinners, use .spinner-border-md and .spinner-grow-md classes.
https://www.tutorialspoint.com/bootstrap/examples/spinners_sizes.php

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Spinners</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h5 class="mt-2">Small Size Spinner</h5><div class="spinner-border spinner-border-sm text" role="status"><span class="visually-hidden"></span></div><div class="spinner-grow spinner-grow-sm" role="status"><span class="visually-hidden"></span></div><h5 class="mt-2">Medium Size Spinner</h5><div class="spinner-border spinner-border-md" role="status"><span class="visually-hidden"></span></div><div class="spinner-grow spinner-grow-md" role="status"><span class="visually-hidden"></span></div></body></html>

To modify the dimensions as required, use custom CSS or inline styles.https://www.tutorialspoint.com/bootstrap/examples/spinners_using_custom_sizes.php

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Spinners</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h5 class="mt-2">Spinner using custom CSS</h5><div class="spinner-border" style="width: 2rem; height: 2rem;" role="status"><span class="visually-hidden"></span></div><div class="spinner-grow" style="width: 2rem; height: 2rem;" role="status"><span class="visually-hidden"></span></div></body></html>

Buttons

  • Button spinners are used to show an action that is currently processing. Replace spinner element text with button text if required.
  • Use .btn and .spinner-border class to create spinner button.
https://www.tutorialspoint.com/bootstrap/examples/spinners_buttons.php

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Spinners</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h5 class="mt-2">Spinner Buttons</h5><button class="btn btn-primary" type="button" disabled><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><span class="visually-hidden"></span></button><button class="btn btn-secondary" type="button" disabled><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>

    Wait...
  &lt;/button&gt;&lt;/body&gt;&lt;/html&gt;</pre>




Use .btn and .spinner-grow class to create growing spinner buttons.https://www.tutorialspoint.com/bootstrap/examples/spinners_grow_buttons.php





Example





You can edit and try running this code using Edit & Run option.





<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Spinners</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><h5 class="mt-2">Growing Spinner Buttons</h5><button class="btn btn-primary" type="button" disabled><span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span><span class="visually-hidden">Wait...</span></button><button class="btn btn-secondary" type="button" disabled><span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>

   Wait...
  &lt;/button&gt;&lt;/body&gt;&lt;/html&gt;</pre>

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

More posts