使用 CSS 和 HTML 的进度条布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5865825/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Progress bar layout using CSS and HTML
提问by Anil Namde
I am trying to achieve UI as shown in the image. However I am having little hard time after trying combinations of positioning now I am clueless. Can someone help me with this?
我正在尝试实现如图所示的 UI。但是，在尝试定位组合后，我几乎没有什么困难，现在我一无所知。有人可以帮我弄这个吗？
<style>
.progress{
position:relative;
width:500px;
}
.bar{
}
.percent{
}
</style>
<div class="progress">
<span class="bar" width="%"></span>
<span class="percent">50%</span>
</div>
回答by Matt Mitchell
HTML:
HTML：
<div id="progress">
<span id="percent">30%</span>
<div id="bar"></div>
</div>
CSS:
CSS：
#progress {
width: 500px;
border: 1px solid black;
position: relative;
padding: 3px;
}
#percent {
position: absolute;
left: 50%;
}
#bar {
height: 20px;
background-color: green;
width: 30%;
}
Sample here: http://jsfiddle.net/WawPr/
此处示例：http: //jsfiddle.net/WawPr/
回答by Gabriele Petrioli
.progress{
position:relative;
width:500px;
border:1px solid #333;
position:relative;
padding:3px;
}
.bar{
background-color:#00ff00;
width:50%;
height:20px;
transition:width 150ms;
}
.percent{
position:absolute;
display:inline-block;
top:3px;
left:50%;
transform:translateX(-50%);
}<div class="progress">
<div class="bar"></div >
<div class="percent">50%</div >
</div>interactive demo at http://jsfiddle.net/gaby/Zfzva/
回答by fubo
i had the same problem and developed this:
我遇到了同样的问题并开发了这个：
HTML:
HTML：
<div class="noload">
<span class="loadtext">40%</span>
<div class="load"></div>
</div>
CSS:
CSS：
.load{
width: 50%;
height: 12px;
background: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAALCAYAAAC+jufvAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAAPklEQVQYV2M48Gvvf4ZDv/b9Z9j7Fcha827Df4alr1b9Z1j4YsV/BuML3v8ZTC/7/GcwuwokrG4DCceH/v8Bs2Ef1StO/o0AAAAASUVORK5CYII=);
-moz-border-radius: 4px;
border-radius: 4px;
}
.noload{
width: 100px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAALCAYAAAC+jufvAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAANUlEQVQYVy3EIQ4AQQgEwfn/zwghCMwGh8Tj+8yVKN0d2l00M6i70XsPmdmfu6OIQJmJqooPOu8mqi//WKcAAAAASUVORK5CYII=);
-moz-border-radius: 4px;
border-radius: 4px;
border: 1px solid #999999;
position: relative;
}
.loadtext {
font-family: Consolas;
font-size: 11px;
color: #000000;
position: absolute;
bottom: -1px;
left: 45%;
}
回答by mcvkr
Just change the onclick function as follows and you will have an animated version of the accepted solution
只需按如下方式更改 onclick 功能，您将拥有已接受解决方案的动画版本
$('.changeprogress').click(function() {
var width = 1;
var percent = $(this).text().replace('%','') ;
var id = setInterval(frame, 25);
function frame() {
if (width >= percent) {
clearInterval(id);
} else {
width++;
$('.bar').css('width', width + '%');
$('.percent').text(width + '%');
}
}
});
http://jsfiddle.net/Zfzva/418/can see it here.
http://jsfiddle.net/Zfzva/418/可以在这里看到。
thanks to
谢谢
https://stackoverflow.com/a/5865894/2815227
https://stackoverflow.com/a/5865894/2815227
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_progressbar_3
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_progressbar_3
回答by ULLAS K
To change % dynamically here is code
在这里动态更改 % 是代码
HTML
HTML
<div class="progress">
<span class="percent">{{currentTimer}}</span>
<div class="bar" [style.width]="progress + '%'"></div>
<span class="duration">{{duration}}</span>
</div>
CSS
CSS
.progress {
width: 100%;
// border: 1px solid black;
position: relative;
padding: 0px;
}
.percent {
position: absolute;
left: 0%;
}
.bar {
height: 16px;
background-color: rgb(41, 49, 32);
}
.duration {
position: absolute;
left: 90%;
top:-5%
}
回答by Alex
In the following sample I added to non breaking spaces to achieve that the browser gives your box a dimension. Without that it would assume it empty and thus not applying the correct width and height.
在下面的示例中，我添加了不间断空格以实现浏览器为您的框提供尺寸。没有它，它会假设它是空的，因此不会应用正确的宽度和高度。
You also might want to give the boxes a position:absolute, for putting them on top of each other. You also should use the style attribute instead of the width attribute since there is no width attribute for divs.
您可能还想给盒子一个 position:absolute，以便将它们放在彼此的顶部。您还应该使用 style 属性而不是 width 属性，因为 div 没有 width 属性。
<style>
.progress{
border: 1px solid black;
position:relative;
width:500px;
}
.bar{
background-color: #00ff00;
position:absolute;
}
.percent{
position:absolute;
left:200px;
}
</style>
<div class="progress">
<div class="bar" style="width:50%"> </div>
<div class="percent">50%</div>
</div>
回答by Senica Gonzalez
<style>
.progress{
position:relative;
width:500px;
height:30px;
border:1px solid #000;
}
.bar{
//Change width with javascript
position:absolute;
top:0px; left:0px;
background:#0F3;
max-width:500px;
height:30px;
}
.percent{
position:relative;
width:100%;
text-align:center;
font-size:18px;
padding:10px;
}
</style>
<div class="progress">
<div class="percent"><span>50%</span><div class="bar"></div></div>
</div>
You'll have to play around with the font-size and padding to get it just right, but that should about do it.
您必须调整字体大小和填充以使其恰到好处，但这应该可以做到。
回答by Imran Khan
Take this example....
拿这个例子....
HTML CODE:
HTML代码：
<div id="progressbar" style="height:25px;">
<span class="text"></span>
</div>
CSS
CSS
.text {
color: black;
margin-left: 130px;
position: absolute;
}
JQUERY:
查询：
$( "#progressbar" ).progressbar({
value: some_Value;
});
$("#progressbar span.text").text(some_Value + "%");
回答by Blake Tallos
I did half the work for you.
我为你做了一半的工作。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#container { width:350px; }
#main_bar {
width:374px;
height:35px;
border:1px solid #111;
}
#inner_bar {
float;left;
width:150px;
background:#00ff00;
margin:-20px 0 0 5px;
}
p {
margin-top:-33px;
text-align:center; }
</style>
<title>The document title</title>
</head>
<body>
<div id="container">
<div id="main_bar">
</div><!--#main_bar-->
<div id="inner_bar">
<p>hello</p>
</div><!--#inner_bar-->
<p>30%</p>
</div>
</body>
</html>
You can mess with the widths, margins, paddings! I got lazy, and didn't want to finish it. lol
你可以弄乱宽度、边距、填充！我很懒，不想完成它。哈哈
