# 怎么使用JS+CSS实现一个简单加载进度条的效果 ## 引言 在现代Web开发中，加载进度条是提升用户体验的重要元素。它能直观地展示内容加载状态，缓解用户等待焦虑。本文将详细介绍如何用原生JavaScript和CSS实现一个简单但实用的加载进度条效果。 ## 一、基础HTML结构 首先创建基本的HTML骨架： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>加载进度条示例</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="progress-container"> <div class="progress-bar" id="progressBar"></div> </div> <script src="script.js"></script> </body> </html> 在style.css中添加样式规则：
/* 基础样式重置 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Arial', sans-serif; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #f5f5f5; } /* 进度条容器 */ .progress-container { width: 80%; max-width: 600px; height: 20px; background-color: #e0e0e0; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } /* 进度条本身 */ .progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #4CAF50, #8BC34A); transition: width 0.3s ease-out; border-radius: 10px; position: relative; } /* 可选：添加百分比文字 */ .progress-bar::after { content: attr(data-progress); position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: white; font-size: 12px; font-weight: bold; } 在script.js中编写核心功能：
// 获取DOM元素 const progressBar = document.getElementById('progressBar'); /** * 模拟加载过程的函数 * @param {number} duration - 加载总时长(ms) * @param {number} interval - 更新间隔(ms) */ function simulateLoading(duration = 3000, interval = 100) { let progress = 0; const increment = (interval / duration) * 100; const timer = setInterval(() => { progress += increment; // 更新进度条 progressBar.style.width = `${Math.min(progress, 100)}%`; progressBar.setAttribute('data-progress', `${Math.round(progress)}%`); // 加载完成时清除定时器 if (progress >= 100) { clearInterval(timer); setTimeout(() => { alert('内容加载完成！'); }, 300); } }, interval); } // 页面加载后启动进度条 window.addEventListener('DOMContentLoaded', () => { simulateLoading(); }); // 实际应用中可以替换为真实加载事件 // window.addEventListener('load', () => {...}); 对于实际文件加载，可以使用XMLHttpRequest的progress事件：
function loadWithRealProgress(url) { const xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.onprogress = (event) => { if (event.lengthComputable) { const percent = (event.loaded / event.total) * 100; updateProgress(percent); } }; xhr.onload = () => updateProgress(100); xhr.send(); } function updateProgress(percent) { progressBar.style.width = `${percent}%`; progressBar.setAttribute('data-progress', `${Math.round(percent)}%`); } 添加CSS动画使进度条更生动：
.progress-bar { /* 原有样式... */ background: linear-gradient(90deg, #4CAF50 0%, #8BC34A 25%, #CDDC39 50%, #FFC107 75%, #FF9800 100%); background-size: 200% 100%; animation: gradientShift 2s linear infinite; } @keyframes gradientShift { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } 添加媒体查询适应不同设备：
@media (max-width: 768px) { .progress-container { height: 15px; width: 90%; } .progress-bar::after { font-size: 10px; } } 以下是整合后的完整实现：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>加载进度条示例</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Arial', sans-serif; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #f5f5f5; } .progress-container { width: 80%; max-width: 600px; height: 20px; background-color: #e0e0e0; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #4CAF50, #8BC34A); transition: width 0.3s ease-out; border-radius: 10px; position: relative; } .progress-bar::after { content: attr(data-progress); position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: white; font-size: 12px; font-weight: bold; } @media (max-width: 768px) { .progress-container { height: 15px; width: 90%; } .progress-bar::after { font-size: 10px; } } </style> </head> <body> <div class="progress-container"> <div class="progress-bar" id="progressBar"></div> </div> <script> const progressBar = document.getElementById('progressBar'); function simulateLoading(duration = 3000, interval = 100) { let progress = 0; const increment = (interval / duration) * 100; const timer = setInterval(() => { progress += increment; progressBar.style.width = `${Math.min(progress, 100)}%`; progressBar.setAttribute('data-progress', `${Math.round(progress)}%`); if (progress >= 100) { clearInterval(timer); setTimeout(() => { progressBar.style.opacity = '0'; setTimeout(() => { progressBar.style.display = 'none'; document.body.innerHTML += '<h1>内容加载完成！</h1>'; }, 500); }, 300); } }, interval); } window.addEventListener('DOMContentLoaded', simulateLoading); </script> </body> </html> 通过本文我们学会了： 1. 使用简单的HTML结构创建进度条容器 2. 通过CSS实现美观的进度条样式和动画 3. 使用JavaScript控制进度更新逻辑 4. 实现模拟加载和真实加载两种场景 5. 添加响应式设计和动画增强效果
这个基础实现可以进一步扩展为： - 多段式进度条 - 圆形进度条 - 带取消按钮的进度条 - 配合AJAX/Fetch的实际文件加载进度
希望这个示例能帮助你快速实现网页加载进度效果！ “`
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
