进度条（Progress）

使用Bootstrap自定义进度条的文件和示例，这些进度条支持堆叠、动态背景和文字标签。

On this page

工作原理

进度条元件使用两个HTML元素，一些CSS设定宽度以及一些属性设定而成。我们不使用HTML5 progress元素，以确保您可以堆叠进度条，增加动画、更换文字标签。

  • 我们在外层使用.progress来指定进度条的最大值。
  • 我们在内层使用.progress-bar来指定进度条目前的值。
  • .progress-bar需要inline设定、通用类别或是客制CSS来设定它们的宽度。
  • .progress-bar也需要一些role和aria属性来使其具有亲和性。

集结以上所有，您将得到以下示例。

<div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
        </div>

Bootstrap提供几个宽度通用类别设定。基于您的需求，这些将帮助您快速设定进度条。

<div class="progress">
        <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
        </div>

标签

在.progress-bar中放置文字内容，将标签添加到进度条。

25%
<div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
        </div>

高度

我们只有在.progress上设置一个height值，如果改变这个值，那么内部的.progress-bar就会自动调整大小。

<div class="progress" style="height: 1px;">
        <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="progress" style="height: 20px;">
        <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>

背景

使用背景通用类别更改各个进度条的外观。

<div class="progress">
        <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="progress">
        <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="progress">
        <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="progress">
        <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
        </div>

多个进度条

如果您需要，可在一个进度条元件中加入多个进度条。

<div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
        <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
        <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
        </div>

条纹的

将.progress-bar-striped加到任何.progress-bar中，就能透过CSS渐变对进度条的背景颜色加上条纹。

<div class="progress">
        <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="progress">
        <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="progress">
        <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="progress">
        <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="progress">
        <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
        </div>

动画条纹

条纹渐变也可以制成动画。将.progress-bar-animated加到.progress-bar中，透过CSS3绘制从右到左的动态效果。

<div class="progress">
        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
        </div>

Sass

Variables

$progress-height:                   1rem;
        $progress-font-size:                $font-size-base * .75;
        $progress-bg:                       $gray-200;
        $progress-border-radius:            $border-radius;
        $progress-box-shadow:               $box-shadow-inset;
        $progress-bar-color:                $white;
        $progress-bar-bg:                   $primary;
        $progress-bar-animation-timing:     1s linear infinite;
        $progress-bar-transition:           width .6s ease;

Keyframes

Used for creating the CSS animations for .progress-bar-animated. Included in scss/_progress-bar.scss. 

@if $enable-transitions {
        @keyframes progress-bar-stripes {
        0% { background-position-x: $progress-height; }
        }
        }
返回顶部