Bootstrap 5 Spinners

在这篇文章中，我们将使用Bootstrap在网站中实现spinners，并将通过实例看到不同类型spinners的实现。Spinners是用来指定组件或网页的加载状态的。Bootstrap通过修改外观、大小和位置，为创建不同风格的旋转器提供了各种类。

语法:

For spinner-border:

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

For spinner-grow:

<div class="spinner-grow" role="status"></div>

方法：我们将使用一个用于旋转器的div元素，并在div部分内声明名为spinner-border和spinner-grow的bootstrap类，以便使用旋转器。 spinner-border类用于旋转旋转器，spinner-grow则用于增长旋转器。它们用于显示一些内容正在加载。

例子1：这个例子说明了Bootstrap中的spinner-border。

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width">
 
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
        rel="stylesheet">
</head>
 
<body>
    <h1 class="text-success text-center">
        GeeksforGeeks
    </h1>
     
    <h4 class="text-info text-center">
        Bootstrap Spinner Border
    </h4>
     
    <div class="d-flex justify-content-center">
        <div class="spinner-border text-secondary"
            role="status">
        </div>
         
        <span>Please Wait </span>
    </div>
</body>
 
</html>

输出:

Bootstrap 5 Spinners

spinner-border

实例2：本实例介绍了Bootstrap中的spinner-grow。

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width">
 
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
        rel="stylesheet">
</head>
 
<body>
    <h1 class="text-success text-center">
        GeeksforGeeks
    </h1>
     
    <h4 class="text-info text-center">
        Bootstrap Spinner Grow
    </h4>
     
    <div class="d-flex justify-content-center">
        <span>
            <h5>Processing</h5>
        </span>
        <div class="spinner-grow text-primary"
            role="status">
        </div>
    </div>
</body>
 
</html>

输出:

Bootstrap 5 Spinners

spinner-grow

现在我们将学习如何根据我们的需要在网页中对齐旋转器。

Alignment

Margin

我们可以使用Bootstrap中的margin utilities类为Bootstrap中的spinners添加保证金。下面是一个例子。

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
 
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
 
<body>
    <h1 class="text-success text-center">
        GeeksforGeeks
    </h1>
 
    <h4 class="text-info text-center">
        Adding margin to Bootstrap Spinners
    </h4>
 
 
    <div class="spinner-border m-5" role="status">
 
    </div>
</body>
 
</html>

输出:

Bootstrap 5 Spinners

为Bootstrap旋转器添加保证金

Placement

我们可以使用文本放置或flex box类将旋转器放置在不同的位置，如中心、末端或开始。下面给出了一个例子，我们在其中使用了flexbox和text placement类。

代码:

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
 
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
 
<body>
    <h1 class="text-success text-center">
        GeeksforGeeks
    </h1>
 
    <h4 class="text-info text-center">
        Spinner Placement using Bootstrap classes
    </h4>
    <h4 class=" text-center">
        Using the Text Placement Classes
    </h4>
 
    <div class="text-center">
        <div class="spinner-border m-5 " role="status">
        </div>
 
    </div>
    <h4 class="text-center">
        Using the Flex Box Classes
    </h4>
    <div class="d-flex justify-content-center">
        <div class="spinner-border" role="status">
        </div>
    </div>
</body>
 
</html>

输出:

Bootstrap 5 Spinners

使用Bootstrap类放置Spinners

Size

我们还可以根据自己的需要，使用Bootstrap类或通过使用内联CSS样式来调整旋转器的大小。

我们可以添加.spinner-border-sm和.spinner-grow-sm类来制作更小的旋转器，以适应不同的组件。下面是一个例子。

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
 
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
 
<body>
    <h1 class="text-success text-center">
        GeeksforGeeks
    </h1>
 
    
     
    <div class="text-center">
        <h3>Making smaller Spinners using the Bootstrap Classes</h3>
        <div class="spinner-border spinner-border-sm" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <div class="spinner-grow spinner-grow-sm" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
 
    </div>
</body>
 
</html>

输出:

Bootstrap 5 Spinners

减少Bootstrap Spinners的尺寸

我们还可以通过定义宽度和高度属性，使用内联CSS样式来增加或减少旋转器的大小。下面是一个例子，我们使用内联CSS样式增加了旋转器的大小。

代码:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Welcome To GFG</h2>
 
 
 
<p>Default code has been loaded into the Editor.</p>
 
 
 
</body>
</html>
a<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
 
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
 
<body>
    <h1 class="text-success text-center">
        GeeksforGeeks
    </h1>
 
    
     
    <div class="text-center">
        <h3>Increasing the size of Spinners using inline CSS</h3>
        <div class="spinner-border" style="width: 4rem; height: 4rem;" role="status">
            <span class="visually-hidden">Loading...</span>
          </div>
          <div class="spinner-grow" style="width: 4rem; height: 4rem;" role="status">
            <span class="visually-hidden">Loading...</span>
          </div>
 
    </div>
</body>
 
</html>