简单打造超赞网页加载进度条在页面中引入 p

简单打造超赞网页加载进度条在页面中引入 pace.js 和您所选择主题的 CSS 文件，就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果。不需要挂接到任何代码，自动检测进展。可以选择颜色和多种效果，有简约，闪光灯，MAC OSX，左侧填充，顶部填充，计数器和弹跳等等。在 https://github.com/HubSpot/pace/tree/master/themes 还有很多主题可供选择。添加方法 1.在头部引入css及js（获取文件） <head> <script src="/pace/pace.js"></script> <link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" /> </head> 2.在主题的css中加入 .pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .pace-inactive { display: none; } .pace .pace-progress { background: ddd; position: fixed; z-index: 100; top: 0; left: 0; height: 2px; } .pace .pace-progress-inner { display: block; position: absolute; rightright: 0px; width: 100px; height: 100%; box-shadow: 0 0 10px ddd, 0 0 5px ddd; opacity: 1.0; -webkit-transform: rotate 3deg translate 0px, -4px ; -moz-transform: rotate 3deg translate 0px, -4px ; -ms-transform: rotate 3deg translate 0px, -4px ; -o-transform: rotate 3deg translate 0px, -4px ; transform: rotate 3deg translate 0px, -4px ; } .pace .pace-activity { display: block; position: fixed; z-index: 100; top: 15px; rightright: 15px; width: 14px; height: 14px; border: solid 2px transparent; border-top-color: ddd; border-left-color: ddd; border-radius: 10px; -webkit-animation: pace-spinner 400ms linear infinite; -moz-animation: pace-spinner 400ms linear infinite; -ms-animation: pace-spinner 400ms linear infinite; -o-animation: pace-spinner 400ms linear infinite; animation: pace-spinner 400ms linear infinite; } @-webkit-keyframes pace-spinner { 0% { -webkit-transform: rotate 0deg ; transform: rotate 0deg ; } 100% { -webkit-transform: rotate 360deg ; transform: rotate 360deg ; } } @-moz-keyframes pace-spinner { 0% { -moz-transform: rotate 0deg ; transform: rotate 0deg ; } 100% { -moz-transform: rotate 360deg ; transform: rotate 360deg ; } } @-o-keyframes pace-spinner { 0% { -o-transform: rotate 0deg ; transform: rotate 0deg ; } 100% { -o-transform: rotate 360deg ; transform: rotate 360deg ; } } @-ms-keyframes pace-spinner { 0% { -ms-transform: rotate 0deg ; transform: rotate 0deg ; } 100% { -ms-transform: rotate 360deg ; transform: rotate 360deg ; } } @keyframes pace-spinner { 0% { transform: rotate 0deg ; transform: rotate 0deg ; } 100% { transform: rotate 360deg ; transform: rotate 360deg ; } } 转自微狐网小智评论： {smile:36}前排爱我博客评论： {smile:2}啦啦啦 wu1yi2fan 评论：有木有Demo……{smile:45} 松果评论：越有内涵的人越低调{smile:26} 李明评论：不错不错。鲜活评论：很详细的教程谢谢阿生评论：不错！学习了淡忘~浅思评论： mark了多谢分享天黑评论：就看看百家网络博客评论：右下角的%也是用到这个？吴尼玛评论： @百家网络博客：右下角的有分享，但不是用的这个

简单打造超赞网页加载进度条 在页面中引入 p - Assbbs

简单打造超赞网页加载进度条在页面中引入 p - Assbbs