Spinnier
Bootstrap Spinners are visual indicators typically used to show the loading state of a component or page. They’re useful when you’re performing asynchronous operations, like data fetching, and need to indicate to users that the process is ongoing. Bootstrap provides built-in spinner components that are both visually appealing and easy to integrate into web projects.
Classes for Bootstrap Spinners
Here’s a table listing the primary classes used for Bootstrap spinners:
Class Name | Description |
.spinner-border | Creates a spinner with a border, resulting in a circular spinning effect. |
.spinner-grow | This class creates a spinner that appears to grow in size, providing an alternative visual effect. |
.text-* (e.g., .text-primary, .text-success) | Color classes that can be used to customize the color of the spinner. |
role=”status” | An ARIA attribute added for accessibility, indicating that this is a status element (usually combined with a visually hidden label). |
.spinner-border-sm, .spinner-grow-sm | Smaller versions of the border and grow spinners, respectively. |
Code Examples with Explanation
Example 1: Border Spinner
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Bootstrap Example</title>
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css”>
</head>
<body>
<h1>Hello, world!</h1>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js”></script>
</body>
</html>
– This code creates a standard circular border spinner using `.spinner-border`.
– The `.text-primary` class colors the spinner with the primary theme color.
– The `role=”status”` and the hidden label `<span class=”sr-only”>Loading…</span>` are used for accessibility, ensuring screen readers can interpret the spinner correctly.
Example 2: Growing Spinner
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Bootstrap Grow Spinner</title>
<link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”spinner-grow text-success” role=”status”>
<span class=”sr-only”>Processing…</span>
</div>
</body>
</html>
– This snippet demonstrates a grow spinner with `.spinner-grow`.
– The spinner is colored green using `.text-success`.
– Similar to the border spinner, it includes an accessibility role and hidden label.
Example 3: Small Spinners
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Small Bootstrap Spinners</title>
<link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”spinner-border spinner-border-sm text-danger” role=”status”>
<span class=”sr-only”>Loading…</span>
</div>
<div class=”spinner-grow spinner-grow-sm text-warning” role=”status”>
<span class=”sr-only”>Processing…</span>
</div>
</body>
</html>
– This example includes both a small border spinner and a small grow spinner using `.spinner-border-sm` and `.spinner-grow-sm`.
– The spinners are colored red (`text-danger`) and yellow (`text-warning`) for variety.
Bootstrap spinners provide a simple yet effective way to indicate loading or processing states in web applications. They are easily customizable in size and color, ensuring they can fit into various design schemes and functional requirements.
YouTube Reference :
1) Spininer in Hindi/Urdu Part-1
2) Spininer in Hindi/Urdu Part-2
A Bootstrap spinner is a component that indicates loading or ongoing processes, often used to improve user experience during wait times.
Yes, this tutorial is offered completely free on the Iqra Technology Academy platform.
Use the spinner-border or spinner-grow classes in Bootstrap 4 or 5 for creating simple and visually appealing spinners.
Responsive spinners can be achieved by using Bootstrap’s grid system to ensure proper scaling across different screen sizes.
Yes, Iqra Technology offers a comprehensive Bootstrap spinner tutorial, including content in Hindi for native learners.
Bootstrap provides two types of spinners:
- Border Spinner: A circular spinner created with the
spinner-borderclass. - Grow Spinner: A pulsating spinner created with the
spinner-growclass.
Bootstrap spinners work on all modern browsers, including Chrome, Firefox, Safari, Edge, and IE11.
Visit Iqra Technology for tutorials, including videos in Hindi that cover practical spinner examples.
Visit the Bootstrap Badges Tutorial Page to get started.
Bootstrap spinners are accessible and include role="status" and aria-label="Loading" for screen readers. Example:
