正文

bootstrap进度条组件详解(代码片段)

loong-hon  loong-hon  2022-12-02  166

关键词：

Bootstrap进度条组件详解

首先需要导入相关bootsrap的组件包：bootstrap.min.css、jquery.min.js、bootstrap.min.js 等，这个就不多说了

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

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

LESS: progress-bars.less

SASS: _progress-bars.scss

基础进度条

实现原理：

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

.progress 
  height: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  background-color: #f5f5f5;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
          box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);

.progress-bar 
  float: left;
  width: 0;
  height: 100%;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  text-align: center;
  background-color: #428bca;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
  -webkit-transition: width .6s ease;
          transition: width .6s ease;

例子：

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

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

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

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

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

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

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

彩色进度条

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

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

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

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

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

css源码：

.progress-bar-success 
  background-color: #5cb85c;


.progress-bar-info 
  background-color: #5bc0de;


.progress-bar-warning 
  background-color: #f0ad4e;


.progress-bar-danger 
  background-color: #d9534f;

使用方法：

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

例子：

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

效果如下：

条纹进度条

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

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

.progress-striped .progress-bar 
  background-image: -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);
  background-image: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);
  background-size: 40px 40px;

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

.progress-striped .progress-bar-success 
  background-image: -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);
  background-image: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);


.progress-striped .progress-bar-info 
  background-image: -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);
  background-image: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);


.progress-striped .progress-bar-warning 
  background-image: -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);
  background-image: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);


.progress-striped .progress-bar-danger 
  background-image: -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);
  background-image: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);

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

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

动态条纹进度条

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

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

下面是css源码：

@-webkit-keyframes progress-bar-stripes 
  from 
    background-position: 40px 0;
  
  to 
    background-position: 0 0;
  

@keyframes progress-bar-stripes 
  from 
    background-position: 40px 0;
  
  to 
    background-position: 0 0;

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

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

.progress.active .progress-bar 
  -webkit-animation: progress-bar-stripes 2s linear infinite;
  animation: progress-bar-stripes 2s linear infinite;

例子：

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

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

层叠进度条：

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

例子：

<div class="progress">
    <div class="progress-bar progress-bar-success" style="width:20%"></div>
    <div class="progress-bar progress-bar-info" style="width:10%"></div>
    <div class="progress-bar progress-bar-warning" style="width:30%"></div>
    <div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div>

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

下面来看一个例子：

<div class="progress">
    <div class="progress-bar progress-bar-success" style="width:20%"></div>
    <div class="progress-bar progress-bar-info" style="width:20%"></div>
    <div class="progress-bar progress-bar-warning" style="width:30%"></div>
    <div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped" style="width:20%"></div>
    <div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div>
    <div class="progress-bar progress-bar-striped progress-bar-warning" style="width:30%"></div>
    <div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success" style="width:20%"></div>
    <div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div>
    <div class="progress-bar progress-bar-warning" style="width:30%"></div>
    <div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%"></div>
</div>

高级组件——进度条jprogressbar(代码片段)

...minate(boolean);设置不确定性 false，确定的进度条（显示进度，常用）。 true，不确定的进度条（一般用来提示等待，不常用）。两种信息类型： pr 查看详情

进度条组件jprogressbar(代码片段)

...言：在安装一个软件的时候经常会遇到进度条，进度条通常是用来显示一个操作的完成百分比，用户可以通过观察进度条得知目前操作进行何种程度。时间组件用于一段时间内依次做出程序员指定的操作。滑块... 查看详情

backgroundworker组件--进度条(代码片段)

代码：BackgroundWorkerbw=newBackgroundWorker();publicMainWindow()InitializeComponent();bw.WorkerReportsProgress=true;bw.WorkerSupportsCancellation=true;bw.DoWork+=bw_DoWork;bw.ProgressChange 查看详情

环形进度条组件(代码片段)

<template><divclass="content"ref="box"><svg:id="idStr"style="transform:rotate(-90deg)":width="width":height="width 查看详情

element穿梭框transfer与进度条组件绑定(代码片段)

Transfer与进度条组件绑定文章目录Transfer与进度条组件绑定前言一、实现原理二、实现流程三、完整代码总结前言最近做的后台管理系统里使用了Element组件Transfer做了一个工作表,然后加了一个进度条来表示工作进度,我希望能将两... 查看详情

微信小程序进度条详解progress自定圆形进度条(代码片段)

...天就好。在微信小程序开发中，progress用来实现水平进度条效果1基本使用<progresspercent="80"stroke-width="12"show-infocolor="pink"active/>效果就是如上图所示percent表示当前的进度stroke-width进度条的宽度color... 查看详情

用初中数学知识撸一个canvas环形进度条(代码片段)

周末好，今天给大家带来一款接地气的环形进度条组件vue-awesome-progress。近日被设计小姐姐要求实现这么一个环形进度条效果，大体由四部分组成，分别是底色圆环，进度弧，环内文字，进度圆点。设计稿截图如下：我的第一反... 查看详情

Bootstrap 4 进度条未显示

】Bootstrap4进度条未显示【英文标题】：Bootstrap4progressbarisnotshowingup【发布时间】：2018-08-0500:50:12【问题描述】：我正在制作一张桌子。有几列需要一个进度条，每边都有一个标签列。我使用React将它作为一个组件生成，这会产生... 查看详情

简单实用的进度条加载组件loader.js

...果，类似下面这样的：这个倒是比较简单，两个div即可，bootstrap官方就提供有多种主题的进度条组件。如果自己要用，参照下别人的代码，写成自己的风格即可，实际上也非常的好理解：.progress{height:20px;backgroun 查看详情

可拖拽圆形进度条组件（支持移动端）(代码片段)

.katexdisplay:block;text-align:center;white-space:nowrap;.katex-display>.katex>.katex-htmldisplay:block;.katex-display>.katex>.katex-html>.tagposition:absolute;right:0px;.katexfont:1.21em/1.2Ka 查看详情

jqueryui组件progressbar进度条的简单使用(代码片段)

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>datepickers</title><metacharset="utf-8"><linkrel="stylesheet"href="http://code.jquery.com/ui 查看详情

高级ui组件(代码片段)

1.进度条（1）.圆形进度条（一般默认为圆形进度条） <ProgressBarandroid:layout_width="wrap_content"android:layout_height="wrap_content"/> （2）条状进度条<ProgressBarandroid:id="@+id/progressBar"style="... 查看详情

手把手教你实现一个vue进度条组件！(代码片段)

...过程进行优化，想到了很多文档或npm等都用到的页面跳转进度条，于是便想自己去实现一个，特此记录。来看下npm搜索组件时候的效果：so下面咱们一起动手实现一下呗。定义使用方式想实现一个组件的前提，一定要想好你的需... 查看详情

2021-08-14wpf控件专题progressbar控件详解(代码片段)

1.ProgressBar控件介绍进度条：显示某个操作的进度过程。MaximumMinimumOrientationValueIsIndeterminate2.具体案例<Grid><ProgressBarHorizontalAli 查看详情

angularjs的ui组件ui-bootstrap分享（十三）——progressbar

原文地址：http://www.cnblogs.com/pilixiami/p/5723593.html进度条控件有两种指令，第一种是uib-progressbar指令，表示单一颜色和进度的一个进度条。第二种是uib-bar和uib-progress指令，表示多种颜色和多个进度组合而成的一个进度条。这是一个... 查看详情

codepush自定义更新弹框及下载进度条(代码片段)

CodePush热更新之自定义更新弹框及下载进度先来几张弹框效果图非强制更新场景image强制更新场景image更新包下载进度效果image核心代码这里的热更新Modal框，是封装成一个功能独立的组件来使用的，需不需要更新以及是否为强制... 查看详情

自定义圆环形进度条实现(代码片段)

最近项目里边要用进度条，进度条中间展示进度，底部展示label，因为这个组件用的地方多，所以我就直接封装了一个通用组件。先看一下效果图：功能有：圆环的颜色和进度可以自定义；中间文字可... 查看详情

深入理解bootstrap--进度条（progressbar）14

1、进度条在网页中，进度条的效果并不少见，比如一个评分系统，比如加载状态等。就如下图所示的一个评分系统，他就是一个简单的进度条效果：进度条和其他独立组件一样，开发者可以根据自己的需... 查看详情