Question

CSS中是否可以仅填充背景颜色的50％？

我正在尝试制作一个进度条，我需要根据进度"%"填充背景颜色。

请提供指示。

Answer 1

有多种不同的方法可以实现这一目标。

伪元素方法：

<div class="progress"></div>

EXAMPLE HERE

.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.. */
}

线性渐变方法：

这种方法的优点是你可以指定多种不同的颜色..

EXAMPLE HERE

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

没有JS / JQUERY的动画

这些方法中的任何一种都可以使用纯CSS进行动画处理。

EXAMPLE HERE

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

过渡方法

EXAMPLE HERE

.progress:after {
    /* other styling.. */
    width:0;
    transition:all 2s;
    -webkit-transition:all 2s;
}
.progress:hover:after {
    width:50%;
}

Answer 2

是的，通过使用渐变停止，甚至可以使用一个div;

HTML

<div></div>

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

Answer 3

我使用Josh C的答案做了一个进度条动画：http://jsfiddle.net/mjEDY/1/

HTML：

<div class="prog">
    <div id="filler" class="filler"></div>
</div>

CSS：

.prog {
    width:200px;
    height:50px;
    border:1px solid black;
}
.filler {
    width:0%;
    height:50px;
    background-color:black;
}

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

它使用了一些高级的javascript技巧（闭包和setTimeouts用于动画），但是你明白了。有了一点点，你可以用它来创建一个基于你想要的进度条而且不需要js插件：）

Answer 4

您还可以使用CSS3的背景属性作为进度条，使用包装器div。

＆＃13;

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

＆＃13;

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

＆＃13;

<div id="imageWrapper">
    <div id="preview"></div>
</div>

＆＃13;

Answer 5

您可以使用100％高度的绝对div并使用javascript更改其宽度。

看起来很酷：这是jsFiddle

Answer 6

对于要使用 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>

填充背景颜色仅占总宽度的50％

6 个答案:

伪元素方法：

线性渐变方法：

没有JS / JQUERY的动画

过渡方法