以下是“原生JS实现首页进度加载动画”的完整攻略：
1. 概述
网站在加载页面时，有时需要等待较长的时间。在这段等待时间内，为了避免用户感到无聊或不耐烦，我们可以添加一个进度加载动画。本文将演示如何使用原生JS实现这样一个进度加载动画。
2. 实现步骤
2.1 准备工作
在HTML文件中添加一个进度条元素，例如：
<div class="progress-bar" id="progress"></div>
使用CSS样式来为进度条定义一个起始状态：
#progress {
width: 0%;
height: 3px;
position: fixed;
top: 0;
left: 0;
background-color: #29d;
z-index: 99;
transition: width 0.2s ease-out;
}
这段CSS样式的含义是：将进度条设置为横向的、高3像素的一条蓝色线，初始宽度为0，固定在页面的顶部。同时，为进度条添加了一个过渡效果，使其在宽度变化时有一个缓慢的动画效果。
2.2 编写JS代码
使用以下JS代码实现进度加载动画：
var progressBar = document.getElementById('progress');
var percent = 0;
var intervalId = setInterval(function() {
percent += 1;
progressBar.style.width = percent + '%';
if (percent >= 100) {
clearInterval(intervalId);
}
}, 10);
这段JS代码的含义是：首先获取到进度条元素，然后定义一个变量percent表示进度条的百分比，初始值为0。接着使用setInterval函数定时执行一个匿名函数，每次执行时增加percent的值1，然后将进度条的宽度设为percent的值加上百分号。最后，当percent达到100时，使用clearInterval函数停止定时器。
至此，当页面加载时，进度条会随着页面的下载进度而不断变化，直至完成，完成后进度条会停止在100%的位置。
2.3 定制进度条样式
可以根据自己的需要，对进度条样式进行调整，例如添加圆角和阴影效果，代码如下：
#progress {
width: 0%;
height: 8px;
position: fixed;
top: 0;
left: 0;
background-color: #29d;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
z-index: 99;
transition: width 0.2s ease-out;
border-radius: 5px;
}
3. 示例说明
示例一
在页面中嵌入大量图片时，可以使用进度条来显示图片加载的进度。例如，下面的代码中，我们在页面中添加了3个大图，使用上述方法实现了一个进度条：
<div class="progress-bar" id="progress"></div>
<img src="大图1.png" />
<img src="大图2.png" />
<img src="大图3.png" />
<script>
var progressBar = document.getElementById('progress');
var percent = 0;
var intervalId = setInterval(function() {
percent += 1;
progressBar.style.width = percent + '%';
if (percent >= 100) {
clearInterval(intervalId);
}
}, 10);
</script>
在页面加载时，进度条会随着图片的下载进度而不断变化，直至完成。
示例二
在异步加载数据时，我们也可以使用进度条来显示数据加载的进度。例如，下面的代码中，我们使用ajax异步加载了一个大型的JSON文件，并在加载时显示进度条：
<div class="progress-bar" id="progress"></div>
<script>
var progressBar = document.getElementById('progress');
var percent = 0;
var xhr = new XMLHttpRequest();
xhr.open('GET', 'large_data.json');
xhr.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
clearInterval(intervalId);
var data = JSON.parse(this.responseText);
// TODO: 进行数据处理
}
};
var intervalId = setInterval(function() {
percent += 1;
progressBar.style.width = percent + '%';
if (percent >= 100) {
clearInterval(intervalId);
}
}, 10);
xhr.send();
</script>
在异步加载数据时，进度条会随着数据下载进度而不断变化，直至完成。
4. 总结
本文介绍了如何使用原生JS实现一个进度加载动画。实现的思路比较简单，关键是要掌握JS对DOM元素属性的操作。最后，希望本文对大家有所帮助。