网页进度条加载完整代码（JavaScript+css+html5）

最新推荐文章于 2024-09-11 16:31:30 发布

沐月Ansel

最新推荐文章于 2024-09-11 16:31:30 发布

阅读量560

点赞数 1

文章标签：前端 javascript Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_73802233/article/details/128990096

版权

网页进度条加载完整代码

<div class="progress-bar">
  <div class="progress"></div>
</div>

let progress = document.querySelector('.progress');
let width = 0;
let interval = setInterval(() => {
  width++;
  progress.style.width = width + '%';
  if (width >= 100) {
    clearInterval(interval);
  }}, 50);

.progress-bar {
  width: 300px;
  height: 20px;
  background-color: #ccc;
  border-radius: 10px;
  overflow: hidden;
}
.progress {
  width: 0%;
  height: 100%;
  background-color: #4CAF50;
  transition: width 0.5s ease-in-out;
}