使用CSS动画进度条

Question

所以，我在此页面上有几个不同的进度条-http://kaye.at/play/goals

这是我的HTML和CSS：

<div class="meter"><span style="width: 100%;"></span></div>


.meter { 
height: 5px;
position: relative;
background: #f3efe6;
z-index: 0;
margin-top: -5px;
overflow: hidden;
}

.meter > span {
z-index: 50;
display: block;
height: 100%;
background-color: #e4c465;
position: relative;
overflow: hidden;
}

我只想为进度条设置动画，以便它从0％缓慢上升到它所占的百分比，而不是仅仅出现在那里，但我想以最简单的方式做到这一点。我最好的选择是什么，我当前使用的代码有可能吗？

Answer 1

我可以想到的与行内宽度设置动画的唯一方法是添加另一个span，因此HTML最终显示为：

<div class="meter">
    <span style="width:80%;"><span class="progress"></span></span>
</div>

需要额外的跨度，因为我们无法（仅使用CSS）检查内联样式想要的宽度是多少，并对其进行动画处理。而且很遗憾，我们无法为auto设置动画。

CSS（您需要添加必要的前缀）：

.meter { 
    height: 5px;
    position: relative;
    background: #f3efe6;
    overflow: hidden;
}

.meter span {
    display: block;
    height: 100%;
}

.progress {
    background-color: #e4c465;
    animation: progressBar 3s ease-in-out;
    animation-fill-mode:both; 
}

@keyframes progressBar {
  0% { width: 0; }
  100% { width: 100%; }
}

您可以在操作here中看到此内容。不支持CSS动画的浏览器只会将条带变为最终状态。

Answer 2

我开发了一个进度条，以便它现在如此轻巧，整洁，并且您也具有百分比值，当百分比从100％更改为7％时，我应用了CSS过渡，只需单击Change按钮以查看其效果作品。将transition: width 3s ease;从3s更改为适合您变慢或变快的需求。

function change(){
				var selectedValue = document.querySelector("#progress-value").value;
				document.querySelector(".progress-bar-striped > div").textContent = selectedValue + "%";
				document.querySelector(".progress-bar-striped > div").style.width = selectedValue + "%";
			}

.progress-bar-striped {
				overflow: hidden;
				height: 20px;
				margin-bottom: 20px;
				background-color: #f5f5f5;
				border-radius: 4px;
				-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
				-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
				box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
			}
			.progress-bar-striped > div {
				background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
				background-size: 40px 40px;
				float: left;
				width: 0%;
				height: 100%;
				font-size: 12px;
				line-height: 20px;
				color: #ffffff;
				text-align: center;
				-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
				-moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
				box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
				-webkit-transition: width 0.6s ease;
				-moz-transition: width 0.6s ease;
				-o-transition: width 0.6s ease;
				transition: width 3s ease;
				animation: progress-bar-stripes 2s linear infinite;
				background-color: #288ade;
			}
			.progress-bar-striped p{
				margin: 0;
			}
			
			@keyframes progress-bar-stripes {

				0% {
					background-position: 40px 0;
				}
				100% {
					background-position: 0 0;
				}
			}

<div class="progress-bar-striped">
			<div style="width: 100%;"><b><p>100%</p></b></div>
		</div>
		<div>
			<input id="progress-value" type="number" placeholder="Enter desired percentage" min="0" max="100" value="7" />
			<input type="button" value="Change" onclick="change()"/>
		</div>