使用 CSS 动画进度条

Posted 2023-05-08

【中文标题】使用 CSS 动画进度条

【英文标题】：Animating progress bars with CSS

【发布时间】：2013-04-03 10:36:17

【问题描述】：

所以，我在这个页面上有几个不同的进度条 - 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% 慢慢上升到它所处的任何百分比，而不是仅仅出现在那里，但我想以最简单的方式来做。我最好的选择是什么，我正在使用的当前代码是否可行？

【问题讨论】：

将animation 与@keyframes 一起使用（例如，每10% 持续10 秒）并使用:after，这样您就可以在其中绘制进度图标（例如# 或•）。

很抱歉，您能给我一个 HTML/CSS 示例吗？我有点业余，只做我自己的事情。

好的，我想通了！谢谢！

【参考方案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 动画的浏览器只会让栏处于最终状态。

【讨论】：

谢谢，这正是我最终要做的。 (:

不用担心 - 这是一个非常漂亮的网站 :)

谢谢！非常感谢。 (:

【参考方案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>

【讨论】：

这是更好的答案。如果宽度增加，接受的只会为进度条设置动画。如果您遇到用户可以返回的情况，则需要为两个方向设置动画，这很容易通过 transition: width 2s ease 和 2 个 div 完成。

【参考方案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