给网站制作进度条

最新推荐文章于 2023-03-10 07:45:10 发布

zhiSiBuYu0517

最新推荐文章于 2023-03-10 07:45:10 发布

阅读量199

点赞数

分类专栏：前端文章标签： html 前端 javascript

原文链接：https://blog.haohaokan17.com/post/61.html

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

引入：

<link href="https://www.haohaokan17.com/js/nprogress.css" rel="stylesheet" />
<script src="https://www.haohaokan17.com/static/js/jquery.min.js"></script>
<script src="https://www.haohaokan17.com/js/nprogress.js"></script>

html：

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

css：

<style>
    .progress {   width: 100%;   height: 1px; } 
    .progress div {   width: 0;   height: 100%;   background: green; transition: width .5s;}
</style>

js：

document.addEventListener('readystatechange', function () {   
  if(document.readyState === 'interactive') {     
     document.querySelector('.progress div').style.width = '33%'  
  }    
  if(document.readyState === 'complete') {
     document.querySelector('.progress div').style.width = '66%'   
  } 
} ) 
window.onload = function () {
   document.querySelector('.abc div').style.width = '100%' 
}