进度条使用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; 
}