您好!欢迎来到模板下载吧!本站资源24小时自动发货,请放心选购,一次付费,终身下载,售后请提交工单!

wordpress主题页面顶部加载进度条的实现

半岛未凉°【美工】❾ 2017-04-09 快速入门 2202 已收录 本文共1245个字,预计阅读需要4分钟。
  • 文章介绍
  • 快速入门
  • 增值服务

wordpress主题页面顶部加载进度条的实现,模板下载吧第一时间能想到的就是css3了,但是可能对IE低版本的浏览器兼容性不好了,但是玩wordpress的,都无视IE了哈,那么,下面我就直接说教程吧,简单粗暴,css3+JQ了辣。

CSS3

  1. body {
  2.     margin:0;
  3. }
  4. #progress {
  5.     position:fixed;
  6.     height2px;
  7.     background:#2085c5;
  8.     transition:opacity 500ms linear
  9. }
  10. #progress.done {
  11.     opacity:0
  12. }
  13. #progress span {
  14.     position:absolute;
  15.     height:2px;
  16.     -webkit-box-shadow:#2085c5 1px 0 6px 1px;
  17.     -webkit-border-radius:100%;
  18.     opacity:1;
  19.     width:150px;
  20.     rightright:-10px;
  21.     -webkit-animation:pulse 2s ease-out 0s infinite;
  22. }
  23. @-webkit-keyframes pulse {
  24.     30% {
  25.     opacity:.6
  26. }
  27. 60% {
  28.     opacity:0;
  29. }
  30. 100% {
  31.     opacity:.6
  32. }
  33. }

对的,仅针对针对webkit内核浏览器写的,处女座的你,可以适当的多写一些前缀。

HTML代码

  1. <div id="progress">
  2.             <span></span>
  3. </div>

jquery代码

  1. $({property: 0}).animate({property: 100}, {  
  2.                 duration: 3000,  
  3.                 step: function() {  
  4.                     var percentage = Math.round(this.property);  
  5.                     $('#progress').css('width',  percentage+"%");  
  6.                      if(percentage == 100) {  
  7.                             $("#progress").addClass("done");//完成,隐藏进度条  
  8.                         }  
  9.                 }  
  10. });  

活学活用吧,上面设置的时间是3秒,根据自己的需求设定时间吧,到了这步,wordpress主题页面顶部加载进度条的实现就出现了,做为想学习者,我想你应该知道ctrl+f5是去缓存刷新,刷新后,看看刷新网页,顶部是不是出现了加载进度条了。。恩,就是这样!

温馨提示:本文最后更新于2019年3月19日,已超过 2 年没有更新,如果文章内容或图片资源失效,请留言反馈,模板下载吧会及时处理,谢谢!

上一篇:

下一篇:

wordpress主题页面顶部加载进度条的实现:等您坐沙发呢!
大牛,别默默的看了,快来点评一下吧!:)。

您必须登录后才能发表评论哦!:)

站内登录 QQ登录 微博登录
wordpress自适应高级图片shejigh主题

Hi, 如果你对这款模板有疑问,可以跟我联系哦!

联系作者

模板下载吧,累计帮助1000+用户成功建站,为草根创业提供助力!

立刻开启你的建站之旅
现在加入模板下载吧,注册一个账号
  • 模板下载吧拥有海量网站模板及源码,站长亲测干净无后门。

  • 注册即能下载免费模板栏目资源,帮您更快的完成网站建设。

  • 每日更新模板资源,每日精品推荐,及时获取最新模板资源流行去向。

  • 完美的售后服务,帮助草根站长、企业等成功建站。

  • 将您最爱的资源收藏,建立自己的资源库,并与朋友分享。