进度条使用HTML和CSS进度条使用HTML和CSS(Progress Bar with HTML

我想创建一个进度条，如下面的图片中：

我不知道创造了这个想法。 我应该使用HTML5技术？

请你给我说说这个创建进度条的一些帮助？

Answer 1:

 #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; } 

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

小提琴

（编辑：更改语法高亮，改变传人子选择器）

Answer 2:

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 3:

我设计了一个替代方案没有JavaScript。 百分比值与使用内联内容的进度移动。 只有在webkit的测试。 希望能帮助到你：

的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> 

Answer 4:

我喜欢这一个：

• 文章
• 演示
• 下载

非常光滑，只有以此为HTML，其余CSS3是向后兼容的（虽然们没有多少养眼）

编辑添加下面的代码，而是直接从网页上面拍摄，所有功劳都该作者

 .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 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> 

Answer 5:

进度条没有嵌套的div ......每个元素的CSS线性渐变的作品在那里。

这里的jsfiddle http://jsfiddle.net/oj1L3y6t/2/

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

 #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; } 

 <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> 

Answer 6:

同@ RoToRa的答案，有一些轻微的调整（正确的颜色和尺寸）：

 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; } 

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

这里的小提琴： 的jsfiddle

而这里的是什么样子：

Answer 7:

在现代浏览器中，你可以使用CSS3和HTML5进度元！

 progress { width: 40%; display: block; /* default: inline-block */ margin: 2em auto; padding: 3px; border: 0 none; background: #444; border-radius: 14px; } progress::-moz-progress-bar { border-radius: 12px; background: orange; } /* webkit */ @media screen and (-webkit-min-device-pixel-ratio:0) { progress { height: 25px; } } progress::-webkit-progress-bar { background: transparent; } progress::-webkit-progress-value { border-radius: 12px; background: orange; } 

 <progress max="100" value="40"></progress> 

Answer 8:

创建其示出了杆（圆的部分）的左侧部分的元素，还产生用于右部分的元件。 对于实际的进度条，创建具有一个重复的背景和其依赖于实际进展的宽度的第三元件。 把它所有的背景图像（含空的进度条）的顶部。

不过，我想你已经知道了......

编辑 ：在创建不使用文本背景的进度条。 您可以使用border-radius ，以获得圆形的效果，如图Rikudo仙人和RoToRa ！

Answer 9:

 .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); } 

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

Answer 10:

如果你想有一个进度条，不添加一些代码PACE可以成为你真棒工具。

只是包括pace.js和您所选择的CSS的主题，你会得到你的页面加载和AJAX导航一个美丽的进度指示器。 与PACE最好的办法是进步的自动检测。

它包含了各种主题和颜色方案为好。

值得一试。

Answer 11:

.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;
}

Answer 12:

使用setInterval 。

 var totalelem = document.getElementById("total"); var progresselem = document.getElementById("progress"); var interval = setInterval(function(){ if(progresselem.clientWidth>=totalelem.clientWidth) { clearInterval(interval); return; } progresselem.style.width = progresselem.offsetWidth+1+"px"; },10) 

 .outer { width: 200px; height: 15px; background: red; } .inner { width: 0px; height: 15px; background: green; } 

 <div id="total" class="outer"> <div id="progress" class="inner"></div> </div> 

使用CSS Transtitions 。

 function loading() { document.getElementById("progress").style.width="200px"; } 

 .outer { width: 200px; height: 15px; background: red; } .inner { width: 0px; height: 15px; background: green; -webkit-transition:width 3s linear; transition: width 3s linear; } 

 <div id="total" class="outer"> <div id="progress" class="inner"></div> </div> <button id="load" onclick="loading()">Load</button> 

Answer 13:

有用于创建HTML5进度条的教程在这里 。 如果你不希望使用HTML5的方法，或者你正在寻找一个全功能的浏览器解决方案，试试这个代码：

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

您可以将彩金更改为任意进度条的颜色和#dbdbdb你的进度栏的背景色。

Answer 14:

    .black-strip
{   width:100%;
    height: 30px;       
    background-color:black; 
}

.green-strip
{   width:0%;           
    height: 30px;       
    background-color:lime;
    animation-name: progress-bar;           
    animation-duration: 4s;  
    animation-iteration-count: infinite; 
}

@keyframes progress-bar { 
    from{width:0%} 
    to{width:100%} 
}

    <div class="black-strip">
        <div class="green-strip">
        </div>
   </div>

Answer 15:

为什么你就不能创建在状态栏的每个部分多张照片？ 如果它是第三只显示第三状态栏的...这是很简单的。 你也许可以弄清楚如何将其更改为基于与表单标签输入的下一张照片。 这里是我的代码的一部分，你必须弄清楚的形式的东西后

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

现在，它似乎很简单，不是吗？

文章来源: Progress Bar with HTML and CSS