zoukankan      html  css  js  c++  java
  • 插件二之页面加载进度条pace.js

    关于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" />
    头部小号条状  -->

    其他

    更多详情参考:

    自定义颜色

    github项目地址

    http://www.danqingyu.com/145.html

  • 相关阅读:
    CSS中em,rem的区别
    Bootstrap自学笔记
    lable标签的妙用
    Ajax
    基础小知识杂烩
    用CSS3画出一个立方体---转
    CSS3方法总汇
    HTML5 DOM扩展
    VS2010在C盘下生成的.iTrace文件解决办法 ,c盘偷偷的减少,心很烦啊,找了半天才知道是这个问题
    伪静态
  • 原文地址:https://www.cnblogs.com/chen110xi/p/4585038.html
Copyright © 2011-2022 走看看