Home > Article > Web Front-end > jQuery implements a complete example of the progress bar effect displayed at the top of the page_jquery

jQuery implements a complete example of the progress bar effect displayed at the top of the page_jquery

WBOYOriginal: 2016-05-16 15:26:511256browse

The example in this article describes how jQuery implements the progress bar effect displayed at the top of the page. Share it with everyone for your reference, the details are as follows:

The specific code is as follows:

<!Doctype html>
<html>
<head>
<title>页面顶部显示的进度条效果</title>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
</head>
<body>
<div id="web_loading"><div></div></div>
<script src="jquery1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">// < ![CDATA[
  jQuery(document).ready(function(){
    jQuery("#web_loading div").animate({width:"100%"},800,function(){ 
      setTimeout(function(){jQuery("#web_loading div").fadeOut(500); 
      }); 
    }); 
  });
// ]]></script>
<style>
#web_loading{
z-index:99999;
width:100%;
}
#web_loading div{
width:0;
height:5px;
background:#FF9F15;
}
</style
</body>
</html>

Click here for complete example codeDownload from this site.

I hope this article will be helpful to everyone in jQuery programming.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js to achieve card-style project management interface UI design effect_javascript skillsNext article：js to achieve card-style project management interface UI design effect_javascript skills

See more

jQuery implements a complete example of the progress bar effect displayed at the top of the page_jquery

Related articles