BootStrap4 Spinners

♦ BootStrap4 Spinners

♣ Example1: BootStrap4 Spinners

The spinners typically used for indicating that something is still loading.
These can be easily attained using spinner class in BootStrap4.
In this example, Basic Spinner is illustrated.

Example

Input:

Output:

♣ Example1: Border Spinners in BootStrap4

The border spinning where only outline of element spins in circle can be attained in BootStrap4.
In this example, various Border Spinners are illustrated.

Example

Input:

<!DOCTYPE html>
<html>
<head>
	<title>BootStrap4 Border Spinner</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/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.4.1/js/bootstrap.min.js"></script>
</head>
<style>
	*{
margin: 0;
}
div{
	margin: 2%;
	display: inline-block;
}
</style>
<body>

<i><h2>BootStrap4 Border Spinner</h2> </i>
<br><br>

</body>
</html>

Output:

♣ Example2: Growing-Spinners in BootStrap4

Growing Spinners start with 0 size and grow until some size with vanishing effects.
In this example, various Growing Spinners are illustrated.

Example

Input:

<i><h2>BootStrap4 Border Spinner</h2> </i>
<br><br>

</body>
</html>

Output:

♣ Example3: Size of Spinners in BootStrap4

Custom sized spinners can also be made in BootStrap4.
Adding '-sm' to the spinner class can provide small spinners.
Additionaly custom CSS can be used to modify size of spinners.
In this example, various sized spinners are illustrated.

Example

Input:

Output:

♣ Example4: Spinners-Buttons in BootStrap4

Spinners can be embedded in buttons as well in BootStrap4.
In this example, Spinners are embedded in buttons.

Example

Input:

Output:

Prev_Lesson Next_Lesson