使用 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; 从 3 秒更改为适合您需要更慢或更快转换的任何值。

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 3s ease;
				-moz-transition: width 3s ease;
				-o-transition: width 3s 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>

Answer 3

这是一个关于纯 CSS 的单个 div 提案

#progressBar {
    height: 3px;
    position: fixed;
    opacity: 0.5;
    z-index:2;
    background: #DDDDDD;
    overflow: hidden;
    animation: progressBar 1.5s ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode:both;
    bottom:0;
    content:"";
    display:block;
    left:0;
}


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