做一个0到100的加载动画
时间: 2024-03-21 22:43:29 浏览: 14
好的,可以使用CSS3的动画和JavaScript实现这个效果。首先,HTML代码中需要有一个用于显示加载动画的元素,比如一个`<div>`标签,例如:
```
<div class="loading">
<div class="progress"></div>
</div>
```
其中,`loading`是用于包裹整个加载动画的容器,`progress`是用于显示进度的容器。
然后,使用CSS3的动画来实现加载进度的效果。例如,可以设置一个从0到100的动画,持续时间为2秒,具体代码如下:
```
.progress {
width: 0%;
height: 10px;
background-color: #007bff;
animation: progress 2s ease-in-out;
}
@keyframes progress {
from {
width: 0%;
}
to {
width: 100%;
}
}
```
最后,在JavaScript中监听动画结束的事件,在加载完成后隐藏加载动画,例如:
```
var progress = document.querySelector(".progress");
progress.addEventListener("animationend", function() {
var loading = document.querySelector(".loading");
loading.style.display = "none";
});
```
这样就可以实现0到100的加载动画了,加载完成后自动隐藏加载动画。