我的目标是实现具有自定义背景的进度条。 最后的结果应该看看:
背景(按顺序)绿色,黄色和红色。 它在背景上的浅蓝色......进度线。
有一些教程可以做到这一点吗? 我已经意识到一些进度条,但我没有自定义背景。 感谢。
答案 0 :(得分:6)
只需使用线性渐变,您可以根据需要指定任意数量的颜色,并轻松控制每个颜色的百分比:
.progress {
height:52px;
width:500px;
border:2px solid #000;
text-align:center;
color:#fff;
font-size:20px;
background:linear-gradient(to right, red 20%, blue 20%, blue 50%,yellow 50%,yellow 60% ,green 0);
}
<div class="progress"> 50 %</div>
你也可以考虑多个渐变,你可以通过调整background-size
来轻松管理它们:
$('.progress').css('background-size','4% 100%,50% 100% ,60% 100% ,100% 100% ');
setTimeout(function() {
$('.progress').html('60%')
$('.progress').css('background-size','20% 100%,30% 100% ,90% 100% ,100% 100% ');
},2000);
.progress {
height:52px;
width:500px;
border:2px solid #000;
text-align:center;
color:#fff;
font-size:20px;
background-image:
linear-gradient(red,red),
linear-gradient(blue,blue),
linear-gradient(green,green),
linear-gradient(yellow,yellow);
background-repeat:no-repeat;
transition:1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Wait to see the animation !
<div class="progress"> 50 %</div>
答案 1 :(得分:4)
使用下面的渐变是示例代码。我试过
/* PROGRESS */
.progress {
background-color: #e5e9eb;
height: 1em;
position: relative;
width: 34em;
}
.progress-bar {
animation-duration: 3s;
animation-name: width;
background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
background-size: 24em 0.25em;
height: 100%;
position: relative;
}
@keyframes width {
0%, 100% {
transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
}
0% {
width: 0;
}
100% {
width: 100%;
}
}
<h1 class="text-center">Progress Bar</h1>
<div class="progress">
<div class="progress-bar">
<div class="progress-shadow"></div>
</div>
</div>
答案 2 :(得分:0)
您可以通过将多个条放置到类为.progress的同一个div中来创建堆叠的进度条,如此w3schools example
所示
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Stacked Progress Bars</h2>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
Free Space
</div>
<div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
Warning
</div>
<div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
Danger
</div>
</div>
</div>
</body>
</html>
答案 3 :(得分:-2)
如果您愿意在项目中使用Bootstrap,请使用其Progress bar组件。
即使你不想使用Bootstrap(或类似的框架),也可以看看它作为构建你自己的例子。