AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Bootstrap 5 保姆级教程（六）：进度条 & 加载效果

2024-04-30 289
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Bootstrap 5 保姆级教程（六）：进度条 & 加载效果

ce2358f3407c4a9b9064e245609b7648.png 一、进度条

1.1 创建进度条

进度条可以显示用户任务的完成过程。

创建一个基本的进度条的步骤如下：

  • 添加一个带有 .progress 类的

    。

  • 接着，在上面的

    内，添加一个带有 class .progress-bar 的空的

    。

  • 添加一个带有百分比表示的宽度的 style 属性，例如 style="width:70%" 表示进度条在 70% 的位置。
<div class="container mt-3">
  <h2>基本进度条</h2>
  <p>要创建一个默认的进度条，可以在容器元素上添加 .progress 类，在子元素上添加 progress-bar 类，并设置进度条进度情况：:</p>
  <div class="progress">
    <div class="progress-bar" style="width:70%"></div>
  </div>
</div>

1.2 进度条高度

进度条高度默认为 16px。我们可以使用 CSS 的 height 属性来修改他：

<div class="container mt-3">
  <h2>进度条高度</h2>
  <p>进度条高度默认为 16px。我们可以使用 CSS 的 height 属性来修改他：</p> 
  <div class="progress" style="height:10px;">
    <div class="progress-bar" style="width:40%;"></div>
  </div>
  <br>
  <div class="progress" style="height:20px;">
    <div class="progress-bar" style="width:50%;"></div>
  </div>
  <br>
  <div class="progress" style="height:30px;">
    <div class="progress-bar" style="width:60%;"></div>
  </div>
</div>

1.3 进度条标签

可以在进度条内添加文本，如进度的百分比：

<div class="container mt-3">
  <h2>进度条文本标签</h2>
  <div class="progress">
    <div class="progress-bar" style="width:70%">70%</div>
  </div>
</div>

1.4 不同颜色的进度条

默认情况下进度条为蓝色，Bootstrap5 还提供了以下颜色的进度条：

<div class="container mt-3">
  <h2>多种颜色的进度条</h2>
  <p>Bootstrap5 提供了以下几种进度条颜色:</p> 
  <div class="progress">
    <div class="progress-bar" style="width:30%"></div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-success" style="width:40%"></div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-info" style="width:50%"></div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-warning" style="width:60%"></div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-danger" style="width:70%"></div>
  </div>
</div>

1.5 条纹的进度条

可以使用 .progress-bar-striped 类来设置条纹进度条：

<div class="container mt-3">
  <h2>条纹的进度条</h2>
  <p>可以使用 .progress-bar-striped 类来设置条纹进度条：</p> 
  <div class="progress">
    <div class="progress-bar progress-bar-striped" style="width:30%"></div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-success progress-bar-striped" style="width:40%"></div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-info progress-bar-striped" style="width:50%"></div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-warning progress-bar-striped" style="width:60%"></div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-danger progress-bar-striped" style="width:70%"></div>
  </div>
</div>

1.6 动画进度条

使用 .progress-bar-animated 类可以为进度条添加动画：

<div class="container mt-3">
  <h2>动画进度条</h2>
  <p>使用 .progress-bar-animated 类可以为进度条添加动画：</p> 
  <div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
  </div>
</div>

1.7 混合色彩进度条

进度条可以设置多种颜色：

<div class="container mt-3">
  <h2>混合色彩进度条</h2>
  <p>进度条可以设置多种颜色:</p> 
  <div class="progress">
    <div class="progress-bar bg-success" style="width:40%">
      安全线
    </div>
    <div class="progress-bar bg-warning" style="width:10%">
      警告线
    </div>
    <div class="progress-bar bg-danger" style="width:20%">
      危险线
    </div>
  </div>
</div>

二、加载效果

2.1 创建加载效果

要创建加载中效果可以使用 .spinner-border 类:

<div class="container mt-3">
  <h2>加载中效果</h2>
  <p>要创建加载中效果可以使用 .spinner-border 类:</p>
                                        
  <div class="spinner-border"></div>
</div>

2.2 设置颜色

可以使用文本颜色类设置不同的颜色：

<div class="container mt-3">
  <h2>不同颜色加载效果</h2>
  <p>可以使用文本颜色类设置不同的颜色：</p>
                                        
  <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>

2.3 闪烁的加载效果

使用 .spinner-grow 类来设置闪烁的加载效果:

<div class="container mt-3">
  <h2>闪烁的加载效果</h2>
  <p>使用 .spinner-grow 类来设置闪烁的加载效果:</p>
                                        
  <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>

2.4 设置加载效果大小

使用.spinner-border-sm 或 .spinner-grow-sm 类来创建加载效果的大小:

<div class="container mt-3">
  <h2>设置加载效果大小</h2>
  <p>使用.spinner-border-sm 或 .spinner-grow-sm 类来创建加载效果的大小:</p>
                                        
  <div class="spinner-border spinner-border-sm"></div>
  <div class="spinner-grow spinner-grow-sm"></div>
</div>

2.5 加载按钮

我们也可以设置一个正在加载的按钮

<div class="container mt-3">
  <h2>加载按钮</h2>
  <p>按钮添加正在加载按钮:</p>
                                        
  <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>



ce2358f3407c4a9b9064e245609b7648.png



文章标签：
前端开发
关键词：
Bootstrap加载
Bootstrap进度条
Bootstrap教程
Bootstrap教程进度条
Bootstrap进度条加载
香甜可口草莓蛋糕
目录
相关文章
游客ogeeqvh5vfa5q
|
11天前
Bootstrap5 加载效果3
通过使用 `.spinner-border-sm` 或 `.spinner-grow-sm` 类，可以调整加载效果的大小。示例代码展示了如何在按钮中嵌入这些加载图标，包括普通按钮、带有文字的按钮以及禁用状态的按钮。
游客ogeeqvh5vfa5q
18 2
游客ogeeqvh5vfa5q
|
14天前
Bootstrap5 进度条1
Bootstrap5 进度条用于显示任务完成情况。创建方法：使用带有 `.progress` 类的 `&lt;div&gt;` 包裹一个带有 `.progress-bar` 类的 `&lt;div&gt;`，并通过 `style=&quot;width:70%&quot;` 设置进度。
游客ogeeqvh5vfa5q
21 1
游客ogeeqvh5vfa5q
|
12天前
Bootstrap5 加载效果2
使用 `.spinner-grow` 类可以创建闪烁的加载效果，配合不同的 `text-` 颜色类（如 `text-primary`、`text-success` 等）可以生成多种颜色的加载动画。
游客ogeeqvh5vfa5q
21 0
游客ogeeqvh5vfa5q
|
12天前
|
前端开发
Bootstrap5 加载效果1
Bootstrap 5 提供了 `.spinner-border` 类来创建加载中效果。通过简单的 HTML 代码即可实现旋转的加载图标。此外，还可以结合文本颜色类（如 `text-primary`、`text-success` 等）来自定义加载图标的颜色。
游客ogeeqvh5vfa5q
18 0
游客ogeeqvh5vfa5q
|
12天前
Bootstrap5 进度条7
混合色彩进度条示例：通过设置不同颜色的进度条段，直观展示不同状态的进度。例如，使用绿色表示空闲空间、黄色表示警告、红色表示危险。
游客ogeeqvh5vfa5q
18 0
游客ogeeqvh5vfa5q
|
12天前
Bootstrap5 进度条6
通过添加 `.progress-bar-animated` 类，可以为进度条添加动态效果，使其更加生动。
游客ogeeqvh5vfa5q
20 0
游客ogeeqvh5vfa5q
|
13天前
Bootstrap5 进度条5
使用 `.progress-bar-striped` 类可以创建条纹效果的进度条。
游客ogeeqvh5vfa5q
21 0
游客ogeeqvh5vfa5q
|
13天前
Bootstrap5 进度条4
Bootstrap5 提供了多种颜色的进度条，默认为蓝色。通过添加不同的背景色类（如 `bg-success`、`bg-info`、`bg-warning` 和 `bg-danger`），可以轻松改变进度条的颜色。
游客ogeeqvh5vfa5q
20 0
游客ogeeqvh5vfa5q
|
13天前
Bootstrap5 进度条3
进度条标签用于展示任务完成的进度，可在其中添加文本显示具体百分比。例如：`&lt;div class=&quot;progress&quot;&gt; &lt;div class=&quot;progress-bar&quot; style=&quot;width:70%&quot;&gt;70%&lt;/div&gt; &lt;/div&gt;` 显示一个70%完成的进度条。
游客ogeeqvh5vfa5q
20 0
游客ogeeqvh5vfa5q
|
13天前
|
前端开发
Bootstrap5 进度条2
进度条高度默认为 16px，可通过 CSS 的 height 属性调整。示例代码：&lt;div class=&quot;progress&quot; style=&quot;height:20px;&quot;&gt;&lt;div class=&quot;progress-bar&quot; style=&quot;width:40%;&quot;&gt;&lt;/div&gt;&lt;/div&gt;
游客ogeeqvh5vfa5q
19 0