進度條使用HTML和CSS

Question

我想創建一個進度條，如下面的圖片中：

我不知道創造了這個想法。我應該使用HTML5技術嗎？

你能否給我一些關於創建這個進度條的幫助？

Answer 1

<div id="progressbar"> 
    <div></div> 
</div> 

#progressbar { 
    background-color: black; 
    border-radius: 13px; /* (height of inner div)/2 + padding */ 
    padding: 3px; 
} 

#progressbar > div { 
    background-color: orange; 
    width: 40%; /* Adjust with JavaScript */ 
    height: 20px; 
    border-radius: 10px; 
} 

Fiddle

（編輯：更改語法高亮，改變傳人子選擇器）

Answer 2

創建一個顯示條的左側部分（圓形部分）的元素，也爲右側部分創建一個元素。 對於實際的進度條，創建一個重複背景和寬度取決於實際進度的第三個元素。 把它放在背景圖片的頂部（包含空的進度條）。

不過，我想你已經知道了......

編輯：當創建不使用文本背景的進度條。您可以使用border-radius獲得圓角效果，如Rikudo Sennin和RoToRa所示！

Answer 3

http://jsfiddle.net/cwZSW/1406/

#progress { 
 
    background: #333; 
 
    border-radius: 13px; 
 
    height: 20px; 
 
    width: 300px; 
 
    padding: 3px; 
 
} 
 

 
#progress:after { 
 
    content: ''; 
 
    display: block; 
 
    background: orange; 
 
    width: 50%; 
 
    height: 100%; 
 
    border-radius: 9px; 
 
}

<div id="progress"></div>

Answer 4

<div class="loading"> 
    <span class="loader"> 
    <span class="innerLoad">Loading...</span> 
</span> 
    </div> 

CSS

.loading{ 
position:relative; 
width:50%; 
height:200px; 
border:1px solid rgba(160,160,164,0.2); 
background-color:rgba(160,160,164,0.2); 
border-radius:3px; 
} 
    span.loader{ 
position:absolute; 
top:40%; 
left:10%; 
width:250px; 
height:20px; 
border-radius:8px; 
border:2px solid rgba(160,160,164,0.8); 
padding:0; 
} 
    span.loader span.innerLoad{ 
text-align:center; 
width:140px; 
font-size:15px; 
font-stretch:extra-expanded; 
color:#2A00FF; 
padding:1px 18px 3px 80px; 
border-radius:8px; 
background: rgb(250,198,149); 

background: -moz-linear-gradient(left, rgba(250,198,149,1) 0%, rgba(245,171,102,1) 47%, rgba(239,141,49,1) 100%); 

background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(250,198,149,1)), color-stop(47%,rgba(245,171,102,1)), color-stop(100%,rgba(239,141,49,1))); 

background: -webkit-linear-gradient(left, rgba(250,198,149,1) 0%,rgba(245,171,102,1) 47%,rgba(239,141,49,1) 100%); 

background: -o-linear-gradient(left, rgba(250,198,149,1) 0%,rgba(245,171,102,1) 47%,rgba(239,141,49,1) 100%); 

background: -ms-linear-gradient(left, rgba(250,198,149,1) 0%,rgba(245,171,102,1) 47%,rgba(239,141,49,1) 100%); 

background: linear-gradient(to right, rgba(250,198,149,1) 0%,rgba(245,171,102,1) 47%,rgba(239,141,49,1) 100%); 

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fac695', endColorstr='#ef8d31',GradientType=1); 

}  

Answer 5

我喜歡這一個：

• Article
• Demo
• Downloads

非常光滑，只有以此爲HTML，其餘CSS3是向後兼容的（雖然們沒有多少養眼）

編輯下面 添加的代碼，而是直接從網頁上面拍攝，所有功勞都該作者

HTML

<div class="meter"> 
    <span style="width: 33%"></span> <!-- I use my viewmodel in MVC to calculate the progress and then use @Model.progress to place it in my HTML with Razor --> 
</div> 

CSS

.meter { 
    height: 20px; /* Can be anything */ 
    position: relative; 
    background: #555; 
    -moz-border-radius: 25px; 
    -webkit-border-radius: 25px; 
    border-radius: 25px; 
    padding: 10px; 
    -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3); 
    -moz-box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3); 
    box-shadow  : inset 0 -1px 1px rgba(255,255,255,0.3); 
} 
.meter > span { 
    display: block; 
    height: 100%; 
     -webkit-border-top-right-radius: 8px; 
    -webkit-border-bottom-right-radius: 8px; 
      -moz-border-radius-topright: 8px; 
     -moz-border-radius-bottomright: 8px; 
       border-top-right-radius: 8px; 
      border-bottom-right-radius: 8px; 
     -webkit-border-top-left-radius: 20px; 
    -webkit-border-bottom-left-radius: 20px; 
      -moz-border-radius-topleft: 20px; 
     -moz-border-radius-bottomleft: 20px; 
       border-top-left-radius: 20px; 
      border-bottom-left-radius: 20px; 
    background-color: #f1a165; 
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a)); 
background-image: -webkit-linear-gradient(top, #f1a165, #f36d0a); 
    background-image: -moz-linear-gradient(top, #f1a165, #f36d0a); 
    background-image: -ms-linear-gradient(top, #f1a165, #f36d0a); 
    background-image: -o-linear-gradient(top, #f1a165, #f36d0a); 
    -webkit-box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4); 
    -moz-box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4); 
    position: relative; 
    overflow: hidden; 
} 

Answer 6

爲什麼CA不只是爲狀態欄的每個部分創建多張圖片？ 如果是第三個只顯示狀態欄的三分之一......這很簡單。您可能可以想出如何根據輸入的form標籤將其更改爲下一張圖片。 這裏是我的代碼的一部分，你必須弄清楚形式的東西后

<form> <!--(extra code)--> 
<!--first progress bar:--> 
<img src="directory"></img> 
<!--second progress bar:--> 
<img src="directory"></img> 
<!--et caetera...--> 
</form> 

現在看來簡單，不是嗎？

Answer 7

同@ RoToRa的答案，有一些輕微的調整（正確的顏色和尺寸）：

HTML

<div id="progressbar"> 
    <div></div> 
</div> 

CSS

body{ 
    background-color: #636363; 
    padding: 1em; 
} 
#progressbar { 
    background-color: #20201F; 
    border-radius: 20px; /* (heightOfInnerDiv/2) + padding */ 
    padding: 4px; 
} 
#progressbar > div { 
    background-color: #F7901E; 
    width: 48%; /* Adjust with JavaScript */ 
    height: 16px; 
    border-radius: 10px; 
} 

這裏的小提琴： jsFiddle

下面是它的樣子：

Answer 8

我設計了一個沒有JavaScript的替代方案。 百分比值隨着使用內嵌內容的進度而移動。 僅在webkit中測試。希望它能幫助：

jsFiddle

CSS：

progress { 
 
\t display:inline-block; 
 
\t width:190px; 
 
\t height:20px; 
 
\t padding:15px 0 0 0; 
 
\t margin:0; 
 
\t background:none; 
 
\t border: 0; 
 
\t border-radius: 15px; 
 
\t text-align: left; 
 
\t position:relative; 
 
\t font-family: Arial, Helvetica, sans-serif; 
 
\t font-size: 0.8em; 
 
} 
 
progress::-webkit-progress-bar { 
 
\t height:11px; 
 
\t width:150px; 
 
\t margin:0 auto; 
 
\t background-color: #CCC; 
 
\t border-radius: 15px; 
 
\t box-shadow:0px 0px 6px #777 inset; 
 
} 
 
progress::-webkit-progress-value { 
 
\t display:inline-block; 
 
\t float:left; 
 
\t height:11px; 
 
\t margin:0px -10px 0 0; 
 
\t background: #F70; 
 
\t border-radius: 15px; 
 
\t box-shadow:0px 0px 6px #777 inset; 
 
} 
 
progress:after { 
 
\t margin:-26px 0 0 -7px; 
 
\t padding:0; 
 
\t display:inline-block; 
 
\t float:left; 
 
\t content: attr(value) '%'; 
 
}

<progress id="progressBar" max="100" value="77"></progress>

Answer 9

進度條沒有嵌套的div ......每個元素在CSS線性漸變的作品。

這裏的jsfiddle http://jsfiddle.net/oj1L3y6t/2/

HTML + CSS +的Javascript

HTML

<div id="progress-0">Loading</div> 
<input id="progress-1" value="Loading"></input> 
<button id="progress-2">Loading</button> 
<p id="progress-3">Loading</p> 

CSS

#progress-0 { 
    border:1px solid black; 
    width:500px; 
    background:#999; 
    text-align:center; 
} 

#progress-1 { 
    border:1px solid black; 
    width:500px; 
    background:#999; 
    text-align:center; 
    margin-top:10px; 
    border-radius: 10px; 
} 

#progress-2 { 
    border:1px solid black; 
    width:500px; 
    background:#999; 
    text-align:center; 
    margin-top:10px; 
} 

#progress-3 { 
    border:1px solid black; 
    width:100px; 
    height:100px; 
    background:#999; 
    line-height: 100px; 
    text-align:center; 
    margin-top:10px; 
    border-radius: 200px; 
} 

JS

function show_progress(i) { 
    var progress1 = i; 
    var progress2 = progress1+1; 
    var progress3 = progress1+2; 

    var magic = "linear-gradient(to right, #FFC2CE " + progress1 + "% ,red " + progress2 + "% , #FFFFFF " + progress3 + "%)"; 
    document.getElementById("progress-0").style.background = magic; 

    var magic = "linear-gradient(to right, lightblue " + progress1 + "% , lightgreen " + progress2 + "%)"; 
    document.getElementById("progress-1").style.background = magic; 

    var magic = "linear-gradient(to right, lightblue " + progress1 + "% , #FFFFFF 100%)"; 
    document.getElementById("progress-2").style.background = magic; 

    var magic = "linear-gradient(#FFC2CE " + progress1 + "% ,red " + progress2 + "% , #FFFFFF " + progress3 + "%)"; 
    document.getElementById("progress-3").style.background = magic;  
} 


function timeout(){ 
    t = setTimeout(function(){ 
     show_progress(t) 
     timeout(); 
    },50); 
    if (t == 78) { clearTimeout(t); } 
    console.log(t); 
} 

timeout(); 

Answer 10

如果您希望在不添加代碼的情況下擁有進度條PACE可以成爲您的絕佳工具。

只需包含pace.js和您選擇的CSS主題，即可獲得頁面加載和AJAX導航的美觀進度指示器。 PACE最好的事情是自動檢測進度。

它包含各種主題和配色方案。

值得一試。

Answer 11

有一個用於創建HTML5進度條here的教程。如果你不希望使用HTML5的方法，或者你正在尋找一個全功能的瀏覽器解決方案，試試這個代碼：

<div style="width: 150px; height: 25px; background-color: #dbdbdb;"> 
    <div style="height: 25px; width:87%; background-color: gold">&nbsp;</div> 
</div> 

您可以將彩金更改爲任意進度條的顏色和#dbdbdb的背景 - 你的進度條的顏色。

Answer 12

.bar { 
background - color: blue; 
height: 40 px; 
width: 40 px; 
border - style: solid; 
border - right - width: 1300 px; 
border - radius: 40 px; 
animation - name: Load; 
animation - duration: 11 s; 
position: relative; 
animation - iteration - count: 1; 
animation - fill - mode: forwards; 
} 

@keyframes Load { 
100 % { 
    width: 1300 px;border - right - width: 5; 
}