• NProgress使用教程


    GitHub地址

    https://github.com/rstacruz/nprogres

    演示网站

    https://ricostacruz.com/nprogress/

    安装NProgress.JS

    (1)外链引入方式

    <script src='nprogress.js'></script>
    <link rel='stylesheet' href='nprogress.css'/>

    (2)NPM安装方式

    $ npm install --save nprogress
    import NProgress from 'nprogress'
    import 'nprogress/nprogress.css'

    (3)CDN

    用法

    (1)基础用法

    NProgress.start();
    NProgress.done();

    (2)高级用法

    设置百分比:调用 .set(n) 方法,其中n的范围0-1

    NProgress.set(0.0);     // Sorta same as .start()
    NProgress.set(0.4);
    NProgress.set(1.0);     // Sorta same as .done()

    增量:调用 .inc() 方法,以随机量递增进度条,永远不会达到100%,用于每个图像负载(或类似)

    NProgress.inc();

    特定值增量:调用 .inc(n) 方法以特定值递增进度条

    NProgress.inc(0.2);    // This will get the current status value and adds 0.2 until status is 0.994

    强制完成:通过传递 true 到 .done() 方法,将显示进度条,即使它未显示(默认如果不调用 .start() 方法, .done() 方法不会做任何事)

    NProgress.done(true);

    获取状态值:使用 .status 获取状态值

    配置

    minimum:更改启动时使用的最小百分比(默认:0.08

    NProgress.configure({ minimum: 0.1 });

    template:可以使用 template 更改标记,若要使进度条保持工作,请将元素 role='bar' 保留在那里,参阅默认模板以进行参考

    NProgress.configure({
      template: "<div class='....'>...</div>"
    });

    easingspeed:使用 easing(a CSS easing string)和 speed(ms)调整动画(默认:ease200

    NProgress.configure({ easing: 'ease', speed: 500 });

    trickle:将其设置为 false 关闭自动递增行为(默认:true

    NProgress.configure({ trickle: false });

    trickleSpeed:调整滴答/递增的频繁度(以ms表示)

    NProgress.configure({ trickleSpeed: 200 });

    showSpinner:将其设置为 false 来关闭 Loading Spinner(默认:true

    NProgress.configure({ showSpinner: false });

    parent:指定此选项以更改父容器(默认:body

    NProgress.configure({ parent: '#container' });

    定制

    根据您的喜好编辑 nprogress.css 文件

  • 相关阅读:
    C++调用外部应用程序
    SVN文件加锁
    vs ComboBox显示多行
    __slots__ Python Class限制添加属性
    Python数据分析之pandas学习
    整理Lua和Unity和Lua交互文章链接
    [整理]Unity3D游戏开发之Lua
    ping telnet ssh netstat
    java rpc
    css 手机适配
  • 原文地址:https://www.cnblogs.com/d-lir/p/14018641.html
Copyright © 2020-2023  润新知