进度条设计详解

一、进度条的基本概念

进度条是指在程序执行中，用一个矩形或线条表示程序进程的一种控件。主要用于提示用户当前正在执行的任务的进程和状态，以及预计完成时间。

进度条由填充、边框和背景组成。进度条的长度代表任务完成量的百分比。在进度条上，还会显示任务的名称、剩余时间和完成百分比等信息。

二、进度条的种类

常见的进度条分为水平进度条和垂直进度条，另外还有圆形进度条。

三、水平进度条的设计

1、基本样式的HTML代码如下所示：

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

2、CSS样式代码如下所示：

.progress-bar {
  height: 25px;
  background-color: #f5f5f5;
  border-radius: 5px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
  margin-top: 10px;
  margin-bottom: 10px;
}

.progress {
  height: 25px;
  margin-bottom: 10px;
  overflow: hidden;
  background-color: #ddd;
  border-radius: 5px;
}

.progress-bar-striped {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
  animation: progress-bar-stripes 2s linear infinite;
}
@-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;
  }
}

3、JavaScript代码如下所示：

function progress(percent, $element) {
  var progressBarWidth = percent * $element.width() / 100;
  $element.find('.progress-bar').animate({ width: progressBarWidth }, 500);
}

progress(50, $('.progress'));

四、垂直进度条的设计

1、基本样式的HTML代码如下所示：

<div class="progress progress-vertical">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40"
  aria-valuemin="0" aria-valuemax="100" style="height: 40%;">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>

2、CSS样式代码如下所示：

.progress-vertical {
  width: 20px;
  height: 200px;
  margin-left: 50px;
  margin-top: 50px;
  margin-bottom: 50px;
  transform: rotate(-90deg);
}

.progress-bar {
  width: 100%;
  background-color: #428bca;
}

3、JavaScript代码如下所示：

function progress(percent, $element) {
  var progressBarHeight = percent * $element.height() / 100;
  $element.find('.progress-bar').animate({ height: progressBarHeight }, 500);
}

progress(50, $('.progress-vertical'));

五、圆形进度条的设计

1、基本样式的HTML代码如下所示：

<div class="circular-progress-bar">
  <div class="background"></div>
  <div class="circle">
    <div class="mask full">
      <div class="fill"></div>
    </div>
    <div class="mask half">
      <div class="fill"></div>
      <div class="fill fix"></div>
    </div>
    <div class="shadow"></div>
  </div>
</div>

2、CSS样式代码如下所示：

.circular-progress-bar {
  width: 100px;
  height: 100px;
  position: relative;
  margin: 0 auto;
}

.background {
  width: 100%;
  height: 100%;
  border-radius: 50px;
  background-color: #f2f2f2;
}

.circle {
  width: 100%;
  height: 100%;
  clip: rect(0, 100px, 100px, 50px);
  position: absolute;
}

.mask {
  width: 100%;
  height: 100%;
  clip: rect(0, 50px, 100px, 0);
  position: absolute;
}

.fill {
  width: 100%;
  height: 100%;
  border-radius: 50px;
  background-color: #428bca;
}

.half .fill.fix {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 100%;
  clip: rect(0, 50px, 100px, 0);
}

.shadow {
  width: 100%;
  height: 100%;
  border-radius: 50px;
  box-shadow: 0px 0px 0px 3px #f2f2f2 inset;
}

3、JavaScript代码如下所示：

function progress(percent, $element) {
  var degrees = percent / 100 * 360;
  $element.find('.fill').css({ 'transform': 'rotate(' + degrees + 'deg)' });
}

progress(50, $('.circular-progress-bar'));