如何使用纯CSS和jQuery实现在页面顶部显示的进度条效果

小编给大家分享一下如何使用纯CSS和jQuery实现在页面顶部显示的进度条效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

专注于为中小企业提供做网站、网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业清江浦免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

一、纯CSS实现

代码如下:


body{ margin:0; padding:0;}
@-moz-keyframes progressing {
 0% {
  width:0px;
 }
 100% {
  width:100%;
 }
}
@-webkit-keyframes progressing {
 0% {
  width:0px;
 }
 100% {
  width:100%;
 }
}
.progress {
 width:100%;
 height:5px;
 overflow:hidden;
 background-color:#27ccc0;
 position:fixed;
 top:0;
 left:0;
 z-index:9;
 -moz-animation:progressing 2s ease-out;
 -webkit-animation:progressing 2s ease-out;
}

二、JQuery实现

一个在页面顶部显示的进度条效果,像在智能手机上浏览网页一样,手机上的浏览器进度条一般都在屏幕顶部,一条极细的小线条,当页面加载的时候,它就不断的加载显示进度,本网页进度条特效与此十分相似,基于jquery插件实现的效果。

代码如下:

页面顶部显示的进度条效果
// < ![CDATA[  jQuery(document).ready(function(){   jQuery("#web_loading div").animate({width:"100%"},800,function(){     setTimeout(function(){jQuery("#web_loading div").fadeOut(500);     });    });   }); // ]]>

看完了这篇文章,相信你对“如何使用纯CSS和jQuery实现在页面顶部显示的进度条效果”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


网页名称:如何使用纯CSS和jQuery实现在页面顶部显示的进度条效果
文章URL:http://azwzsj.com/article/gieodd.html

其他资讯