×

Html & Html5

The World's best Software Development Study Portal

Bootstrap Spinners


If we want to add any spinner or loader we can add these spinners through .spinner-border class.
Let’s understand this by the following program :-


Basic Spinner


<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 4 Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>

</head>

<body>

<div class="container-fluid">

<h2>Spinners</h2>

<div class="spinner-border"></div>

</div>

</body>

</html>

Output of this Program


Spinners

It used to rotate and seems like it is loading.



Color Spinner


We can change the color of the spinner or loader .
Let’s understand them by this program :-


<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 4 Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>

</head>

<body>

<div class="container-fluid">

<h2>colored Spinners</h2>

<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>

</body>

</html>

Output of this Program


colored Spinners

Growing Spinners

<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 4 Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>

</head>

<body>

<div class="container">

<h2>Growing Spinners</h2>

<p>Use the .spinner-grow 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"></div>

<div class="spinner-grow text-dark"></div>

<div class="spinner-grow text-light"></div>

</div>

</body>

</html>

Output of this Program


Growing Spinners

Use the .spinner-grow class if you want the spinner/loader to grow instead of "spin":

Spinner Buttons

<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 4 Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>

</head>

<body>

<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>

Output of this Program


Spinner Buttons

Add spinners to buttons:




Bootstrap 4 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute