详解Bootstrap进度条组件 - 洛水三千-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

详解Bootstrap进度条组件 - 洛水三千

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 20, 2016 pm 04:49 PM

在网页中，进度条的效果并不少见，如：平分系统、加载状态等，进度条组件使用了css3的transition和animation属性来完成一些特效，这些特效在IE9及IE9以下版本、Firefox的老版本中并不支持，Opera 12 不支持 animation 属性。

进度条和其他独立组件一样，开发者可以根据自己的需要选择对应的版本：

LESS: progress-bars.less

SASS: _progress-bars.scss

基础进度条

实现原理：

需要两个容器，外容器使用类名.progress，子容器使用类名.progress-bar;其中.progress用来设置进度条容器的背景色，容器的高度，间距等；而.progress-bar设置进度方向，进度条的背景色和过度效果；下面是css源码：

<span style="color: #800000">.progress </span>{<span style="color: #ff0000">
  height</span>:<span style="color: #0000ff"> 20px</span>;<span style="color: #ff0000">
  margin-bottom</span>:<span style="color: #0000ff"> 20px</span>;<span style="color: #ff0000">
  overflow</span>:<span style="color: #0000ff"> hidden</span>;<span style="color: #ff0000">
  background-color</span>:<span style="color: #0000ff"> #f5f5f5</span>;<span style="color: #ff0000">
  border-radius</span>:<span style="color: #0000ff"> 4px</span>;<span style="color: #ff0000">
  -webkit-box-shadow</span>:<span style="color: #0000ff"> inset 0 1px 2px rgba(0, 0, 0, .1)</span>;<span style="color: #ff0000">
          box-shadow</span>:<span style="color: #0000ff"> inset 0 1px 2px rgba(0, 0, 0, .1)</span>;
}

<span style="color: #800000">.progress-bar </span>{<span style="color: #ff0000">
  float</span>:<span style="color: #0000ff"> left</span>;<span style="color: #ff0000">
  width</span>:<span style="color: #0000ff"> 0</span>;<span style="color: #ff0000">
  height</span>:<span style="color: #0000ff"> 100%</span>;<span style="color: #ff0000">
  font-size</span>:<span style="color: #0000ff"> 12px</span>;<span style="color: #ff0000">
  line-height</span>:<span style="color: #0000ff"> 20px</span>;<span style="color: #ff0000">
  color</span>:<span style="color: #0000ff"> #fff</span>;<span style="color: #ff0000">
  text-align</span>:<span style="color: #0000ff"> center</span>;<span style="color: #ff0000">
  background-color</span>:<span style="color: #0000ff"> #428bca</span>;<span style="color: #ff0000">
  -webkit-box-shadow</span>:<span style="color: #0000ff"> inset 0 -1px 0 rgba(0, 0, 0, .15)</span>;<span style="color: #ff0000">
          box-shadow</span>:<span style="color: #0000ff"> inset 0 -1px 0 rgba(0, 0, 0, .15)</span>;<span style="color: #ff0000">
  -webkit-transition</span>:<span style="color: #0000ff"> width .6s ease</span>;<span style="color: #ff0000">
          transition</span>:<span style="color: #0000ff"> width .6s ease</span>;
}

例子：

<span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:30%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="30"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #0000ff">></span>
             <span style="color: #0000ff"><span style="color: #800000">span </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="sr-only"</span><span style="color: #0000ff">>3</span>0%<span style="color: #0000ff"></span><span style="color: #800000">span</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span></span>

role属性作用：告诉搜索引擎这个div的作用是进度条；

aria-valuenow=”30”属性作用：当前进度条的进度为40%；

aria-valuemin=”0”属性作用：进度条的最小值为0%；

aria-valuemax=”100”属性作用：进度条的最大值为100%；

可以将设置了.sr-only类的标签从进度条组件中移除，而让当前进度显示出来；

<span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:40%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="40"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span> <span style="color: #0000ff">></span>40%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span>

彩色进度条

彩色进度条和警告进度条一样，为了能给用户一个更好的体验，也根据不同的状态配置了不同的进度条颜色，主要包括以下四种：

progress-bar-info:表示信息进度条，蓝色

progress-bar-success:表示成功进度条，绿色

progress-bar-warning:表示警告进度条，黄色

progress-bar-danger:表示错误进度条，红色

css源码：

<span style="color: #800000">.progress-bar-success </span>{<span style="color: #ff0000">
  background-color</span>:<span style="color: #0000ff"> #5cb85c</span>;
}<span style="color: #800000">

.progress-bar-info </span>{<span style="color: #ff0000">
  background-color</span>:<span style="color: #0000ff"> #5bc0de</span>;
}<span style="color: #800000">

.progress-bar-warning </span>{<span style="color: #ff0000">
  background-color</span>:<span style="color: #0000ff"> #f0ad4e</span>;
}<span style="color: #800000">

.progress-bar-danger </span>{<span style="color: #ff0000">
  background-color</span>:<span style="color: #0000ff"> #d9534f</span>;
}

使用方法：

只需要在基础进度条上增加对应的类名即可

例子：

<span style="color: #0000ff"><span style="color: #800000">h1</span><span style="color: #0000ff">></span>彩色进度条<span style="color: #0000ff"></span><span style="color: #800000">h1</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-success"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:25%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="25"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #0000ff">></span>25%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-info"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:40%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="40"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #0000ff">></span>40%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-warning"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:80%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="25"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #0000ff">></span>80%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-danger"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:60%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="40"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #0000ff">></span>60%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
      <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span></span></span></span></span></span></span></span>

效果如下：

条纹进度条

条纹进度条采用css3的线性渐变来实现，并未借助任何图片，使用条纹进度条只需在进度条的容器.progress基础上追加类名”progress-striped”,如果要进度条纹像彩色进度一样，具有彩色效果，只需在进度条上增加相应得颜色类名

下面是.progress-striped样式源码：

<span style="color: #800000">.progress-striped .progress-bar </span>{<span style="color: #ff0000">
  background-image</span>:<span style="color: #0000ff"> -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent)</span>;<span style="color: #ff0000">
  background-image</span>:<span style="color: #0000ff">linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent)</span>;<span style="color: #ff0000">
  background-size</span>:<span style="color: #0000ff"> 40px 40px</span>;
}

条纹进度对应的每种状态也有不同的颜色

<span style="color: #800000">.progress-striped .progress-bar-success </span>{<span style="color: #ff0000">
  background-image</span>:<span style="color: #0000ff"> -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent)</span>;<span style="color: #ff0000">
  background-image</span>:<span style="color: #0000ff">linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent)</span>;
}<span style="color: #800000">

.progress-striped .progress-bar-info </span>{<span style="color: #ff0000">
  background-image</span>:<span style="color: #0000ff"> -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent)</span>;<span style="color: #ff0000">
  background-image</span>:<span style="color: #0000ff">linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent)</span>;
}<span style="color: #800000">

.progress-striped .progress-bar-warning </span>{<span style="color: #ff0000">
  background-image</span>:<span style="color: #0000ff"> -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent)</span>;<span style="color: #ff0000">
  background-image</span>:<span style="color: #0000ff">linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent)</span>;
}<span style="color: #800000">

.progress-striped .progress-bar-danger </span>{<span style="color: #ff0000">
  background-image</span>:<span style="color: #0000ff"> -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent)</span>;<span style="color: #ff0000">
  background-image</span>:<span style="color: #0000ff">linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent)</span>;
}

下面来看看条纹进度条的运用：

<span style="color: #0000ff"><span style="color: #800000">h1</span><span style="color: #0000ff">></span>条纹进度条<span style="color: #0000ff"></span><span style="color: #800000">h1</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress progress-striped"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-success"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:25%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="25"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #0000ff">></span>25%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress progress-striped"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-info"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:40%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="40"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #0000ff">></span>40%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress progress-striped"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-warning"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:80%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="25"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #0000ff">></span>80%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress progress-striped"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-danger"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:60%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="40"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #0000ff">></span>60%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span></span></span></span></span></span></span></span>

动态条纹进度条

在进度条.progress 、.progress-striped两个类的基础上在加入类名.active就能实现动态条纹进度条。

其实现原理主要是通过css3的animation来完成。首先通过@keyframes创建了一个progress-bar-stripes的动画，这个动画主要做了一件事，就是改变背景图像的位置，也就是 background-position的值。因为条纹进度条是通过CSS3的线性渐变来制作的，而linear-gradient实现的正是对应背景中的背景图片

下面是css源码：

<span style="color: #800000">@-webkit-keyframes progress-bar-stripes </span>{<span style="color: #ff0000">
  from {
    background-position</span>:<span style="color: #0000ff"> 40px 0</span>;
  }<span style="color: #800000">
  to </span>{<span style="color: #ff0000">
    background-position</span>:<span style="color: #0000ff"> 0 0</span>;
  }<span style="color: #800000">
}
@keyframes progress-bar-stripes </span>{<span style="color: #ff0000">
  from {
    background-position</span>:<span style="color: #0000ff"> 40px 0</span>;
  }<span style="color: #800000">
  to </span>{<span style="color: #ff0000">
    background-position</span>:<span style="color: #0000ff"> 0 0</span>;
  }<span style="color: #800000">
}</span>

@keyframes仅仅是创建了一个动画效果，如果要让进度条真正的动起来，我们需要通过一定的方式调用@keyframes创建的动画 “progress-bar-stripes”，并且通过一个事件触发动画生效。在Bootstrap框架中，通过给进度条容器“progress”添加一个类名“active”，并让文档加载完成就触“progress-bar-stripes”动画生效

调用动画对应的样式代码如下：

<span style="color: #800000">.progress.active .progress-bar </span>{<span style="color: #ff0000">
  -webkit-animation</span>:<span style="color: #0000ff"> progress-bar-stripes 2s linear infinite</span>;<span style="color: #ff0000">
  animation</span>:<span style="color: #0000ff"> progress-bar-stripes 2s linear infinite</span>;
}

例子：

<span style="color: #0000ff"><span style="color: #800000">h1</span><span style="color: #0000ff">></span>动态条纹进度条<span style="color: #0000ff"></span><span style="color: #800000">h1</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress progress-striped active"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-success"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:25%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="25"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #0000ff">></span>25%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress progress-striped active"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-info"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:40%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="40"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #0000ff">></span>40%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress progress-striped active"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-warning"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:80%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="25"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #0000ff">></span>80%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress progress-striped active"</span><span style="color: #0000ff">></span>
         <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-danger"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:60%;"</span><span style="color: #ff0000"> role</span><span style="color: #0000ff">="progressbar"</span><span style="color: #ff0000"> aria-valuenow</span><span style="color: #0000ff">="40"</span><span style="color: #ff0000"> aria-valuemax</span><span style="color: #0000ff">="100"</span><span style="color: #ff0000"> aria-valuemin</span><span style="color: #0000ff">="0"</span><span style="color: #0000ff">></span>60%<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
     <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span></span></span></span></span></span></span></span>

效果如下（由于是直接从网页上结果来的图，这里并看不到它的动态效果）：

层叠进度条：

层叠进度可以将不容状态的进度条放在一起，按水平方式排列

例子：

<span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress"</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-success"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:20%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-info"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:10%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-warning"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:30%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-danger"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:15%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span></span></span></span>

除了层叠彩色进度条之外，还可以层叠条纹进度条，或者说条纹进度条和彩色进度条混合层叠，仅需要在“progress”容器中添加对应的进度条，同样要注意，层叠的进度条之和不能大于100%。

下面来看一个例子：

<span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress"</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-success"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:20%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-info"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:20%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-warning"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:30%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-danger"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:15%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress"</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-success progress-bar-striped"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:20%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-info progress-bar-striped"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:20%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-striped progress-bar-warning"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:30%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-danger progress-bar-striped"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:15%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress"</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-success"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:20%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-info progress-bar-striped"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:20%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-warning"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:30%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="progress-bar progress-bar-danger progress-bar-striped"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="width:15%"</span><span style="color: #0000ff">></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?Mar 04, 2025 pm 12:32 PM

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

How do I use HTML5 form validation attributes to validate user input?Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

What are the best practices for cross-browser compatibility in HTML5?Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

How to efficiently add stroke effects to PNG images on web pages?Mar 04, 2025 pm 02:39 PM

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

What is the purpose of the <datalist> element?Mar 21, 2025 pm 12:33 PM

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

What is the purpose of the <progress> element?Mar 21, 2025 pm 12:34 PM

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

How do I use the HTML5 <time> element to represent dates and times semantically?Mar 12, 2025 pm 04:05 PM

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

What is the purpose of the <meter> element?Mar 21, 2025 pm 12:35 PM

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Repo: How To Revive Teammates

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

3 weeks agoByDDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

3 weeks agoByDDD

Hot Tools

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

Dreamweaver Mac version

Visual web development tools

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

SublimeText3 Mac version

God-level code editing software (SublimeText3)

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

Hot Topics

Where is the login entrance for gmail email?

7322

1625

1350

1262

1209