进度条（Progress）

2024-07-16 08:00| 来源: 网络整理| 查看: 265

工作原理

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

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

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

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

标签

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

25% 25% 高度

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

背景

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

多个进度条

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

条纹的

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

动画条纹

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

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; } } }

【本文地址】

进度条（Progress）

进度条（Progress）

今日新闻

推荐新闻