关于pace.js
pace.js包含14样式,每种样式可以自定义颜色,官方下载中提供了几种颜色的主题,使用方式也很简单,引入pace的js文件跟所需样式文件即可
<link rel="stylesheet" href="../themes/pace-theme-center-circle.css" /> <script src="../pace.js"></script>
各样式ie下兼容要求
<!-- <link rel="stylesheet" href="../themes/pace-theme-barber-shop.css" /> barber条状ie8+ --> <!-- <link rel="stylesheet" href="../themes/pace-theme-big-counter.css" /> 数字型ie9+ --> <!-- <link rel="stylesheet" href="../themes/pace-theme-bounce.css" /> 落地球ie10+ --> <!-- <link rel="stylesheet" href="../themes/pace-theme-center-atom.css" /> 花型ie10+ --> <!-- <link rel="stylesheet" href="../themes/pace-theme-center-circle.css" /> 翻转型ie10+ --> <!-- <link rel="stylesheet" href="../themes/pace-theme-center-radar.css" /> 雷达型ie10+ --> <!-- <link rel="stylesheet" href="../themes/pace-theme-center-simple.css" /> 中间条状ie8+ --> <!-- <link rel="stylesheet" href="../themes/pace-theme-corner-indicator.css" /> 右上角旋转圈ie10+ --> <!-- <link rel="stylesheet" href="../themes/pace-theme-fill-left.css" /> 全屏幔布ie9+ --> <!-- <link rel="stylesheet" href="../themes/pace-theme-flash.css" /> 条状+转圈ie10+ --> <!-- <link rel="stylesheet" href="../themes/pace-theme-flat-top.css" /> 头部扁平条ie8+ --> <!-- <link rel="stylesheet" href="../themes/pace-theme-loading-bar.css" /> 中间条状+数字百分比ie8+ --> <!-- <link rel="stylesheet" href="../themes/pace-theme-mac-osx.css" /> 头部动态mac-osx条ie10+ --> <!-- <link rel="stylesheet" href="../themes/pace-theme-minimal.css" /> 头部小号条状 -->
其他
更多详情参考:
http://www.danqingyu.com/145.html