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>输出结果如下： -