進度條設計詳解

一、進度條的基本概念

進度條是指在程序執行中，用一個矩形或線條表示程序進程的一種控制項。主要用於提示用戶當前正在執行的任務的進程和狀態，以及預計完成時間。

進度條由填充、邊框和背景組成。進度條的長度代表任務完成量的百分比。在進度條上，還會顯示任務的名稱、剩餘時間和完成百分比等信息。

二、進度條的種類

常見的進度條分為水平進度條和垂直進度條，另外還有圓形進度條。

三、水平進度條的設計

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'));

六、總結

在設計進度條時，需要考慮任務的複雜程度、數據的更新速度、用戶的操作體驗等多個因素。良好的進度條設計可以提升用戶的體驗感，讓用戶更好地理解任務的執行進程和狀態。