-
BS Grid Basic
-
BS Typography
-
BS Tables
-
BS Images
-
BS Jumbotron
-
BS Alerts
-
BS Forms
-
BS Floating Labels
-
BS Form Validation
-
BS Buttons
-
BS Button Groups
-
BS Badges
-
BS Progress Bars
-
BS Spinnier
-
BS Pagination
-
BS List Groups
-
BS Cards
-
BS Dropdowns
-
BS Collapse
-
BS Navs
-
BS Navbar
-
BS Carousel
-
BS Modal
-
BS Tooltip
-
BS Panels
-
BS Popover
-
BS Toast
-
BS Scrollspy
-
BS OffCanvas
-
BS Utilities
-
BS Flex
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
