用HTML和CSS进度条
我想创build一个进度条，如下图所示：
我不知道如何创build这个。 我应该使用HTML5技术吗？
你能否给我一些关于创build这个进度条的帮助？
<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; }
小提琴
（编辑：改变语法高亮;改变后代子select器）
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>
我devise了一个没有JavaScript的替代品。 百分比值随着使用内联内容的进度而移动。 仅在webkit中testing。 希望能帮助到你：
的jsfiddle
CSS：
progress { display:inline-block; width:190px; height:20px; padding:15px 0 0 0; margin:0; background:none; border: 0; border-radius: 15px; text-align: left; position:relative; font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; } progress::-webkit-progress-bar { height:11px; width:150px; margin:0 auto; background-color: #CCC; border-radius: 15px; box-shadow:0px 0px 6px #777 inset; } progress::-webkit-progress-value { display:inline-block; float:left; height:11px; margin:0px -10px 0 0; background: #F70; border-radius: 15px; box-shadow:0px 0px 6px #777 inset; } progress:after { margin:-26px 0 0 -7px; padding:0; display:inline-block; float:left; content: attr(value) '%'; }
<progress id="progressBar" max="100" value="77"></progress>
我喜欢这一个：
- 文章
- 演示
- 下载
非常光滑，只有这样的HTML和其余的CSS3是向后兼容的（虽然它会有lesseyecandy）
编辑下面添加的代码，但直接从上面的页面，所有信贷给该作者
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; }
没有嵌套的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();
与@ 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
以下是它的样子： 
创build一个显示条的左边部分（圆形部分）的元素，也为右边的部分创build一个元素。 对于实际的进度条，创build一个具有重复背景和宽度取决于实际进度的第三个元素。 把它放在背景图片的顶部（包含空的进度条）。
但是我想你已经知道了…
编辑 ：创build不使用文本背景的进度条时。 如Rikudo Sennin和RoToRa所示，您可以使用border-radius来获得圆angular效果！
<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 ); }
为什么不能为状态栏的每个部分创build多个图片？ 如果是三分之一，只显示状态栏的三分之一…这很简单。 你可能可以弄清楚如何改变它到下一个图片的基础上input的forms标签。 这是我的代码的一部分，你必须稍后找出表单的东西
<form> <!--(extra code)--> <!--first progress bar:--> <img src="directory"></img> <!--second progress bar:--> <img src="directory"></img> <!--et caetera...--> </form>
现在看起来很简单，不是吗？
如果你希望有一个进度条，而不添加一些代码PACE可以成为一个很棒的工具。
只需要包含pace.js和你select的CSS主题，你就可以为你的页面加载和AJAX导航获得一个漂亮的进度指示器。 PACE最好的事情就是自动检测进度。
它包含各种主题和配色scheme。
值得一试。
这里有一个用于创buildHTML5进度条的教程。 如果您不想使用HTML5方法，或者您正在寻找全浏览器解决scheme，请尝试以下代码：
<div style="width: 150px; height: 25px; background-color: #dbdbdb;"> <div style="height: 25px; width:87%; background-color: gold"> </div> </div>
您可以将颜色GOLD更改为任何进度栏颜色，将#dbdbdb更改为进度栏的背景颜色。
.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; }
