BS3 Progressbars

簡介

進度條 (progressbar) 常用來顯示目前的工作進度，特別是在上傳和下載文件時常會使用。HTML5 中也有個新的標記 <progress> 用來顯示進度條，但其外觀相當單調，和 BS3 中的進度條的外觀比較，根本不在同一個檔次。進度條的基礎樣式類別為 .progress 及 .progress-bar，.progress 為外圍容器，構建進度條的底色；.progress-bar 則為進度條的本體。 style 屬性的百分比值則決定進度條本體的長度；進度條本體的內容文字決定進度條的標示。

進度條本體的修飾樣式類別有：

.progress-bar-sucess, .progress-bar-info, .progress-bar-warning, .progress-bar-danger

設定進度條的本體顏色，不具動畫效果。

.progress-bar-striped

設定進度條本體的斜紋裝飾，如再加上 .active 狀態樣式類別，則具有動畫效果。

以下為 BS3 V3.3.6 之 bootstrap.css 樣式表中有關 .progress-bar 的相關樣式設定。

@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
@-o-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;
  }
}
.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: #337ab7;
    -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;
         -o-transition: width .6s ease;
            transition: width .6s ease;
}
.progress-striped .progress-bar,
.progress-bar-striped {
    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:      -o-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);
    -webkit-background-size: 40px 40px;
          background-size: 40px 40px;
}
.progress.active .progress-bar,
.progress-bar.active {
    -webkit-animation: progress-bar-stripes 2s linear infinite;
         -o-animation: progress-bar-stripes 2s linear infinite;
            animation: progress-bar-stripes 2s linear infinite;
}
.progress-bar-success {
    background-color: #5cb85c;
}
.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:      -o-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-bar-info {
    background-color: #5bc0de;
}
.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:      -o-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-bar-warning {
    background-color: #f0ad4e;
}
.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:      -o-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-bar-danger {
    background-color: #d9534f;
}
.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:      -o-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);
}

範例

範例中展示了六種不同的進度條外觀，前五種都經由條飾樣式類別改變其外觀，唯有最後一種堆疊進度條的 HTML 程式碼略有不同。

圖 1. 範例

CSS

<style>
html {
    width: 100%;
    height: 100%;
}
body {
    margin: 0 auto;
    max-width: 1000px;
    padding: 20px;
}
</style>

CSS 中沒有特別的樣式設定。

HTML

<body>
                   
    

        
Default progress bar
        

            73%
            
        
    

    

        
With / Without min-width
        

            0%
        
        

            0%
        
  
    

    

        
Context progress bar
        

            100% charged (Success)
        
        

            80% charged (Info)
        
        

            35% charged (Warning)
            
        
        

            25% charged (Danger)
        
    
    
    
    

     
Striped progress bar
        

            83%
        
    
    
    

        
Animated striped progress bar
        

            83%
        
    

    

        
Stacked progress bar
        

            10%
            15%
            20%
            15%
        
    
</body>

HTML 程式碼相當簡單，不多作解釋；只有三個地方需要注意。
第 14 行中用 min-width 屬性值決定進度條本體的最小長度，這裡用的不是百分比的值。
第 55~60 行是建立堆疊進度條的方式，只要將數個進度條本體元件放置到一個 .progress 的容器中即可。
第 48 行的 .active 類別加在 .progress 容器中，第 59 行的 .active 類別則加在 .progress-bar 的進度條本體中。這二種用法在容器中只有一條進度條時，不會產生任何差異，只有在像堆疊進度條這種情況下，如果 .active 類別是加在 .progress 容器時，則容器中所有斜紋裝飾的進度條都會有動畫效果。但如果 .active 只加在 .progress-bar 的本體元件時，只有該進度條會具有動畫效果。