如何自定义Bootstrap spinner的样式

要自定义 Bootstrap 的 spinner 样式，您可以按照以下步骤操作：

1. 首先，在 HTML 文件中创建一个基本的 Bootstrap spinner。这是一个使用 Bootstrap 5 的示例：

<
    !DOCTYPE html>
    
<
    html lang="en">
    
<
    head>
    
    <
    meta charset="UTF-8">
    
    <
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <
    link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
   <
    title>
    Custom Bootstrap Spinner<
    /title>
    
<
    /head>
    
<
    body>
    
    <
    div class="spinner-border text-primary" role="status">
    
        <
    span class="visually-hidden">
    Loading...<
    /span>
    
    <
    /div>
    
<
    /body>
    
<
    /html>
    

1. 接下来，为您的 spinner 添加自定义样式。在此示例中，我们将更改边框颜色、宽度和速度。在您的 HTML 文件的 < head> 部分添加一个` 标签，然后添加以下 CSS 代码：

    .spinner-border {
    
        border-color: #ff0000;
     /* 更改边框颜色 */
        border-width: 0.5em;
     /* 更改边框宽度 */
        animation: customSpinner 2s linear infinite;
 /* 更改旋转速度 */
    }


    @keyframes customSpinner {

        0% {
    
            transform: rotate(0deg);

        }

        100% {
    
            transform: rotate(360deg);

        }

    }
    
<
    /style>
    

这段代码将更改 spinner 的边框颜色为红色，边框宽度为 0.5em，并将旋转速度更改为每 2 秒旋转一次。您可以根据需要自定义这些值。

现在，您应该看到一个具有自定义样式的 Bootstrap spinner。您可以根据需要调整 CSS 属性以获得所需的外观。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！