springboot bootstrap fileinput 进度条

一、进度条

1.1 创建进度条

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

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

• 添加一个带有 .progress 类的 <div>。
• 接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
• 添加一个带有百分比表示的宽度的 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>