emmm，定时器？写个定时器还要清除，万一造成内存泄露？定时器之间还会互相影响，呼呼呼那就不考虑了
那么就用css写一个~~
语法：
animation: name duration timing-function delay iteration-count direction;@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
1、设置进度条起始宽度0%，3s之内宽度移动85%，为什么不设置100%呢？ 因为3s进度条就加载到100%，如果我们的页面却迟迟没有加载完成，那么完全影响用户体验，所以我们设置到85%就让进度条停了下来，然后页面加载完成之后隐藏进度条，实现以假乱真！
/* loading */ .loading { background: #000; position: absolute; z-index: 999; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; } .progress { position: relative; width: 200px; height: 8px; background: #fff; border-radius: 20px; margin-top: 20px; } .progress-bar { position: absolute; left: 0; top: 0; height: 8px; line-height: 20px; border-radius: 20px; background: #d7bb29; animation: animate-positive 3s; } @keyframes animate-positive { from {width:0px;} to {width:85%;} } @-webkit-keyframes animate-positive { from {width:0px;} to {width:85%;} }