The example in this article describes the loading animation of the web page loading bar using jQuery to achieve the ribbon extension effect. Share it with everyone for your reference, the details are as follows:
I think the jQuery ribbon effect web page loading bar animation introduced here is quite creative. Although it is not difficult, it is not easy to think of using such a background to make the Loading loading bar. If you are not convinced, Why didn't you think of doing this? The loading bar effect of this web page uses the jQuery plug-in.
The screenshot of the running effect is as follows:
The online demo address is as follows:
http://demo.jb51.net/js/2015/jquery-n-color-cha-web-loading-demo/
The specific code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>页面初加载的动画</title>
<style type="text/css">
body{margin:0;}
.top_bg{height:5px;width:0;background-color:#093; background-image:url(images/colorbg.png);}/*如果你喜欢博主的那个彩带背景欢迎下载，直接把background:#f03换成背景*/
</style>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//顶部背景动画
$(".top_bg").animate({
width: "100%"
},
{
queue: false,
duration:4000
});
})
</script>
</head>
<body>
<div class="top_bg"></div>
</body>
</html>I hope this article will be helpful to everyone in jQuery programming.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
