Bootstrap 加载器



  • 定义和使用

    要创建加载器,请使用 .spinner-border 类:
    <div class="container">
       <div class="spinner-border"></div>
    </div>
    
    
    尝试一下
    输出结果如下:
  • 彩色加载器

    使用任何文本颜色实用程序将颜色添加到加载器:
    <div class="container">
       <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>
    
    
    尝试一下
    输出结果如下:
  • 渐隐渐现的加载器

    如果希望加载器渐隐渐现增长,请使用 .spinner-grow 类:
    <div class="container">
       <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>
    
    
    尝试一下
    输出结果如下:
  • 加载器尺寸

    使用 .spinner-border-sm.spinner-grow-sm 创建较小的加载器:
    <div class="container">
       <div class="spinner-border spinner-border-sm"></div>
       <div class="spinner-grow spinner-grow-sm"></div>
    </div>
    
    
    尝试一下
    输出结果如下:
  • 加载器按钮

    下面示例演示了加载器按钮:
    <div class="container">
          <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>
    
    
    尝试一下
    输出结果如下: