当前位置：首页 > article >正文

【css酷炫效果】纯CSS实现进度条加载动画

article 2025/3/19 19:50:46

【css酷炫效果】纯CSS实现进度条加载动画

缘
创作背景
html结构
css样式
完整代码
- 基础版
- 进阶版
效果图

通过CSS渐变与背景位移动画，无需JavaScript即可创建流体动态进度条。
想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90490485

缘

创作随缘，不定时更新。

创作背景

刚看到csdn出活动了，赶时间，直接上代码。

html结构

<div class="progress-bar">
    <div class="progress"></div>
</div>

css样式

.progress-bar {
    width: 300px;
    height: 20px;
    background: #eee;
    border-radius: 10px;
    overflow: hidden;
}

.progress {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        #3498db 25%, 
        #9b59b6 50%, 
        #e74c3c 75%);
    background-size: 200% 100%;
    animation: flow 2s linear infinite;
    transform-origin: left;
    /* transform: scaleX(0.7); 设置当前进度70% */
}

@keyframes flow {
    0% { background-position: 100% 0; }
    100% { background-position: 0% 0; }
}

完整代码

基础版

<!DOCTYPE html>
<html>
<head>
<style>
.progress-bar {
    width: 300px;
    height: 20px;
    background: #eee;
    border-radius: 10px;
    overflow: hidden;
}

.progress {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        #3498db 25%, 
        #9b59b6 50%, 
        #e74c3c 75%);
    background-size: 200% 400%;
    animation: flow 2s linear infinite;
    transform-origin: left;
}

@keyframes flow {
    0% { background-position: 100% 0; }
    100% { background-position: 0% 0; }
}
</style>
</head>
<body>
    <div style='text-align:center;margin-top:50px;'>
		<div class="progress-bar">
			<div class="progress"></div>
		</div>
	</div>
	
</body>
</html>

进阶版

<!DOCTYPE html>
<html>
<head>
<style>
.progress-bar {
    width: 300px;
    height: 20px;
    background: #eee;
    border-radius: 10px;
    overflow: hidden;
}

.progress {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        #3498db 25%, 
        #9b59b6 50%, 
        #e74c3c 75%);
    background-size: 200% 400%;
    animation: flow 2s linear infinite;
    transform-origin: left;
	
	
    background: repeating-linear-gradient(
        -45deg,
        #3498db,
        #3498db 10px,
        #2980b9 10px,
        #2980b9 20px
    );
    background-size: 200% 100%;
	
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
    border-right: 3px solid rgba(255,255,255,0.3);
    transition: transform 0.3s ease-out;
}

@keyframes flow {
    0% { background-position: 100% 0; }
    100% { background-position: 0% 0; }
}
</style>
</head>
<body>
    <div style='text-align:center;margin-top:50px;'>
		<div class="progress-bar">
			<div class="progress"></div>
		</div>
	</div>
	
</body>
</html>