jQuery 仅填充背景颜色总宽度的 50%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18647184/
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
fill background color only 50% of it total width
提问by gaurav jain
Is it possible in CSS to fill background color only 50% of its total width?
是否可以在 CSS 中仅填充其总宽度的 50% 的背景颜色？
I am trying make a progress bar where I need to fill background color based on the "%"of progress.
我正在尝试制作一个进度条，我需要根据"%"进度填充背景颜色。
Please provide pointers.
请提供指点。
回答by Josh Crozier
There are multiple different ways to achieve this.
有多种不同的方法可以实现这一点。
Pseudo element approach:
伪元素方法：
<div class="progress"></div>
.progress {
width:200px;
height:50px;
border:1px solid black;
position:relative;
}
.progress:after {
content:'\A';
position:absolute;
background:black;
top:0; bottom:0;
left:0;
width:50%; /* Specify the width.. */
}
Linear-gradients approach:
线性梯度方法：
The advantage to this approach is that you can specify multiple different colors..
这种方法的优点是您可以指定多种不同的颜色。
.progress {
width:200px;
height:50px;
border:1px solid black;
background: -webkit-linear-gradient(left, black 50%, white 50%);
background: -moz-linear-gradient(left, black 50%, white 50%);
background: -ms-linear-gradient(left, black 50%, white 50%);
background: linear-gradient(left, black 50%, white 50%);
}
Animation without JS/JQUERY
没有 JS/JQUERY 的动画
Either of these approaches can be animated with pure CSS..
这些方法中的任何一种都可以使用纯 CSS 进行动画处理。
.progress:after {
/* other styling .. */
width:50%; /* End width.. */
-webkit-animation: filler 2s ease-in-out;
-moz-animation: filler 2s ease-in-out;
animation: filler 2s ease-in-out;
}
@-webkit-keyframes filler {
0% {
width:0;
}
}
Transition approach
过渡方法
.progress:after {
/* other styling.. */
width:0;
transition:all 2s;
-webkit-transition:all 2s;
}
.progress:hover:after {
width:50%;
}
回答by Atilla
Yes, by using gradients' stops, it's possible even with one div;
是的，通过使用渐变的停止，即使只有一个 div 也是可能的；
HTML
HTML
<div></div>
CSS
CSS
div {
width:400px;
height:400px;
background: -webkit-linear-gradient(left, #00ff00 50%, #ff0000 50%);
background: -moz-linear-gradient(left, #00ff00 50%, #ff0000 50%);
background: -o-linear-gradient(left, #00ff00 50%, #ff0000 50%);
background: -ms-linear-gradient(left, #00ff00 50%, #ff0000 50%);
background: linear-gradient(left, #00ff00 50%, #ff0000 50%);
}
回答by Pablo Mescher
I did a progressbar animation using Josh C's answer: http://jsfiddle.net/mjEDY/1/
我使用 Josh C 的回答做了一个进度条动画：http: //jsfiddle.net/mjEDY/1/
HTML:
HTML：
<div class="prog">
<div id="filler" class="filler"></div>
</div>
CSS:
CSS：
.prog {
width:200px;
height:50px;
border:1px solid black;
}
.filler {
width:0%;
height:50px;
background-color:black;
}
JS:
JS：
var stepSize = 50;
setTimeout((function() {
var filler = document.getElementById("filler"),
percentage = 0;
return function progress() {
filler.style.width = percentage + "%";
percentage +=1;
if (percentage <= 100) {
setTimeout(progress, stepSize);
}
}
}()), stepSize);
It uses a few advanced javascript tricks (closures and setTimeouts for animation), but you get the idea.. With a little twiddling you can use it to create a progress bar based on whatever you want and no need for js plugins either :)
它使用了一些高级的 javascript 技巧（动画的闭包和 setTimeouts），但你明白了.. 稍微摆弄一下，你就可以用它来创建一个基于你想要的任何东西的进度条，也不需要 js 插件:)
回答by nonkertompf
You can also use background properties of CSS3 for a progress bar, using a wrapper div.
您还可以使用包装器 div 将 CSS3 的背景属性用于进度条。
var stepSize = 50;
setTimeout((function() {
var wrapper = document.getElementById("imageWrapper"),
image = document.getElementById("preview"),
percentage = 0;
return function progress() {
wrapper.style.backgroundSize = percentage + "% 100%";
image.innerHTML = percentage + "%";
percentage +=1;
if(percentage <= 100){
setTimeout(progress, stepSize);
if(percentage == 100) image.style.opacity = 1;
}
}
}()), stepSize);div#imageWrapper{
width:100px;
height:120px;
background: url('data:image/gif;base64,R0lGODlhAQABAPAAAAAAAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==') no-repeat;
background-size:0% 100%;
background-position:0 100px;
}
div#preview{
width:100px;
height:100px;
background: url('http://sugarbird.skyauction.com/content/qart_140775b.jpg');
background-size:cover;
opacity: 0.5;
}<div id="imageWrapper">
<div id="preview"></div>
</div>回答by Dylan Holmes
回答by Penny Liu
For those who want to use Bootstrap 4can use:
对于那些想要使用Bootstrap 4 的人可以使用：
var delay = 500;
$(".progress-bar").each(function(i) {
$(this).delay(delay * i).animate({
width: $(this).attr('aria-valuenow') + '%'
}, delay);
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: delay,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now) + '%');
}
});
});.progress-bar {
width: 0;
}
.bg-purple {
background-color: #825CD6 !important;
}
.progress .progress-bar {
transition: unset;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<h2>Bootstrap 4 Progress Bars</h2>
<div class="progress border">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-purple" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50</div>
</div>
</div>