纯css实现动态条形加载条效果附源码

纯css实现动态条形加载条效果

下面是实现动态条形加载条效果的代码示例：

上面的代码中，我们创建了一个进度容器progress-container和一个进度条progress-bar。

实现加载进度动画效果

下面是实现加载进度动画效果的代码：

		.progress-bar {
			height: 100%;
			background-color: #4caf50;
			border-radius: 5px;
			position: absolute;
			width: 0;
			animation: progress-bar-animation 2s ease-in-out;
		}

		@keyframes progress-bar-animation {
			0% {
				width: 0;
			}
			100% {
				width: 100%;
			}
		}
	

上面的代码中，我们为进度条progress-bar添加了一个动画progress-bar-animation。该动画将在2秒内将进度条宽度从0变为100%。

添加动态百分比

下面是实现添加动态百分比的代码：

		

			

			
0%
		
	

		.progress-percent {
			position: absolute;
			top: 0;
			left: 50%;
			transform: translate(-50%, -50%);
			color: white;
			font-size: 14px;
		}
	

		const progressBar=document.querySelector('.progress-bar');
		const progressPercent=document.querySelector('.progress-percent');
		let currentProgress=0;
		setInterval(()=> {
			currentProgress +=10;
			progressBar.style.width=`${currentProgress}%`;
			progressPercent.textContent=`${currentProgress}%`;
		}, 1000);
	

我们在进度容器progress-container中添加了一个展示百分比的层progress-percent，并且实现了一个每秒增加10%的动态效果。

总结

以上就是使用纯css实现动态条形加载条效果的全部内容。通过创建进度容器和进度条，加入动画效果和动态百分比，我们实现了一个比较完整的加载条效果。