js 实现 loading
实现 JavaScript Loading 动画的方法
使用 CSS 和 JavaScript 创建基础加载动画
定义一个简单的旋转动画通过 CSS，用 JavaScript 控制显示和隐藏：
.loader {
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
margin: 20px auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}function showLoader() {
document.getElementById('loader').style.display = 'block';
}
function hideLoader() {
document.getElementById('loader').style.display = 'none';
}使用 Promise 模拟异步加载
结合异步操作展示加载状态：
function simulateLoading() {
showLoader();
return new Promise(resolve => {
setTimeout(() => {
hideLoader();
resolve('Data loaded');
}, 2000);
});
}
simulateLoading().then(response => console.log(response));进度条加载实现
创建动态进度条显示加载进度：
<div id="progress-container" style="width:100%;background:#ddd;">
<div id="progress-bar" style="height:30px;width:0%;background:#4CAF50;"></div>
</div>let progress = 0;
const interval = setInterval(() => {
progress += 10;
document.getElementById('progress-bar').style.width = progress + '%';
if (progress >= 100) clearInterval(interval);
}, 500);使用第三方库（如 Spin.js）
快速集成专业加载动画：
const opts = {
lines: 12,
length: 30,
width: 10,
radius: 40,
color: '#fff',
speed: 1
};
const spinner = new Spinner(opts).spin(document.getElementById('loader'));骨架屏加载效果
现代应用常用技术：
.skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}function showSkeleton() {
document.querySelectorAll('.skeleton-placeholder').forEach(el => {
el.classList.add('skeleton');
});
}注意事项
- 移动端需考虑性能优化，避免复杂动画
- 加载时间超过5秒时应提供取消选项
- 重要操作需防止用户在加载期间重复提交
- 考虑使用Web Workers处理长时间任务
