使用 HTML 和 CSS 的进度条

我想创建一个进度条，如下图所示:

Progress Bar Example

我不知道如何创建这个，我应该使用 HTML5技术吗？

你能给我一些建立这个进度条的帮助吗？

220643 次浏览
小开

Create an element which shows the left part of the bar (the round part), also create an element for the right part. For the actual progress bar, create a third element with a repeating background and a width which depends on the actual progress. Put it all on top of the background image (containing the empty progress bar).

But I suppose you already knew that...

Edit: When creating a progress bar which do not use textual backgrounds. You can use the border-radius to get the round effect, as shown by Rikudo Sennin and RoToRa!

小开

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>

小开
最佳答案 

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

Fiddle

(EDIT: Changed Syntax highlight; changed descendant to child selector)

小开 

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

小开

I like this one:

very slick with only this as HTML and the rest CSS3 that is backwards compatible (although it will have less eyecandy)

Edit Added code below, but taken directly from the page above, all credit to that author

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

小开

Why can't you just Create Multiple pictures for each part of the status bar? If it's a third just show a third of the status bar... it's very simple. You could probably figure out how to change it to the next picture based of input with the form tag. Here's my part of the code, you have to figure out the form stuff later

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

Now it seems simple, doesn't it?

小开

Same as @RoToRa's answer, with a some slight adjustments (correct colors and dimensions):

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>

Here's the fiddle: jsFiddle

And here's what it looks like: jsFiddle-screenshot

小开

2014 answer: Since 2014 HTML now 5 includes a <progress> element that does not need JavaScript. The percent value moves with the progress using inline content. Tested only in webkit. Hope it helps:

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>

小开

Progress Bar without nested divs... for every element where the css linear-gradient works.

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

小开

If you wish to have a progress bar without adding some code PACE can be an awesome tool for you.

Just include pace.js and a CSS theme of your choice, and you get a beautiful progress indicator for your page load and AJAX navigation. Best thing with PACE is the auto detection of progress.

It contains various themes and color schemes as well.

Worth a try.

小开

There is a tutorial for creating an HTML5 progress bar here. If you don't want to use HTML5 methods or you are looking for an all-browser solution, try this code:

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

You can change the color GOLD to any progress bar color and #dbdbdb to the background-color of your progress bar.

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

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

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

小开

In modern browsers you could use a CSS3 & HTML5 progress Element!

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>

小开 
    .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>
小开 
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta chatset="UTF-8" />
<title>CSS Progress Bar</title>
        

<style>
.wrapper {
width: 500px;
}
            

.progress-bar {
width: 100%;
background-color: #e0e0e0;
padding: 3px;
border-radius: 3px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
}
            

.progress-bar-fill {
display: block;
height: 22px;
background-color: #659cef;
border-radius: 3px;
                

transition: width 500ms ease-in-out;
}
</style>
        

</head>
<body>
<div class="wrapper">
<div class="progress-bar">
<span class="progress-bar-fill" style="width: 70%;"></span>
</div>
</div>
</body>
</html>
小开 

        .progress > progress{
height: 30px;
width: 320px;
}
.progress::before{
content: '';
position: absolute;
background: rgb(17, 138, 17);
height: 20px;
top: 343px;
animation: progressAnimate 3s linear infinite;
}
@keyframes progressAnimate{
0%{
width: 0;
}
10%{
width: 10px;
}
20%{
width: 12px;
}
50%{
width: 18px;
}
100%{
width: 320px;
}
}
@-webkit-keyframes progressAnimate{
0%{
width: 0;
}
10%{
width: 10px;
}
20%{
width: 12px;
}
50%{
width: 18px;
}
100%{
width: 320px;
}
}
.progress::after{
content: '';
position: absolute;
background: linear-gradient(to right,transparent,#fff,transparent);
height: 50px;
width: 98px;
left: 500px;
top: 343px;
animation: linearAnimate 3s linear infinite;
}
@keyframes linearAnimate{
0%{
left: 400px;
}
10%{
left: 549px;
}
20%{
left: 590px;
}
50%{
left: 599px;
}
100%{
left: 600px;
}
}
@-webkit-keyframes linearAnimate{
0%{
left: 400px;
}
10%{
left: 549px;
}
20%{
left: 590px;
}
50%{
left: 599px;
}
100%{
left: 600px;
}
}
<div class="progress"><progress max="100" value="0">0%</progress></div><br>

windows 10 progress bar

小开 

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


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


提交答案