纯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>
