jQuery implements web page loading bar loading animation with ribbon extension effect

jQuery implements web page loading bar loading animation with ribbon extension effect_jquery

WBOY

Release： 2016-05-16 15:34:39

Original

1612 people have browsed it

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>

Copy after login

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