Home >Web Front-end >JS Tutorial >jQuery implements web page loading bar loading animation with ribbon extension effect_jquery

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

WBOYOriginal: 2016-05-16 15:34:391671browse

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.

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：jquery validate demo 基础_jqueryNext article：jquery validate demo 基础_jquery

See more

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

Related articles