纯JS写的，简单的上传进度条，当上传的文件较大，加一个动态画面，就不会让人觉得出错了或网络卡了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upload Animation</title>
<style>
body{
padding: 50px;
}
.downloadlist .progress-bar {
flex-basis: 60%;
background: rgb(145, 231, 19);
height: 20px;
line-height: 18px;
border-radius: 10px;
overflow: hidden;
position: relative;
text-align: center;
}
.downloadlist .progress {
height: 100%;
width: 100%;
}
.downloadlist .uploading {
background: repeating-linear-gradient(-45deg,
#4caf50,
#4caf50 10px,
#66bb6a 10px,
#66bb6a 20px);
background-size: 200% 100%;
animation: stripes 30s linear infinite;
/* 修改动画时间为30秒 */
}
@keyframes stripes {
from {
background-position: 200% 0;
}
to {
background-position: -200% 0;
}
}
</style>
</head>
<body>
<div class="downloadlist">
<div class="progress-bar">
<div class="progress uploading">上传中..</div>
</div>
</div>
<br>
<button id="startButton">开始动画</button>
<button id="stopButton">停止动画</button>
<script>
document.addEventListener('DOMContentLoaded', () => {
const progressBar = document.querySelector('.progress.uploading');
const startButton = document.getElementById('startButton');
const stopButton = document.getElementById('stopButton');
startButton.addEventListener('click', () => {
// 添加运行中的动画类
progressBar.classList.add('uploading');
});
stopButton.addEventListener('click', () => {
// 移除运行中的动画类
progressBar.textContent = "已完成"
progressBar.classList.remove('uploading');
});
});
</script>
</body>
</html>
