• nprogress 转


    转载:http://www.xuanfengge.com/front-end-nprogress-and-lightweight-web-progress-bar-nanobar.html

    前言

    进度条库是前端中常见的库之一,bootstrap中提供了多种进度条样式。NProgress.js和nanobar.js是两款轻量级的进度条组件,使用简便。轩枫阁用过Nprogress,用于页面刚打开时的页面加载进度显示。

    官网

    NProgress.js:http://ricostacruz.com/nprogress/

    nanobar.js:http://nanobar.micronube.com/

    1. NProgress

    nprogress

    简介

    轻量级的ajax进度条应用,灵感来自Google, YouTube, and Medium。

    纳米级的进度条。 具有逼真的动画涓涓细流来说服你的用户,something is happen!

    安装

    引入nprogress.jsnprogress.css到项目中。

    基本用法

    只需要调用start() 和 done()来控制进度条

    高级用法

    百分比:通过设置progress的百分比,调用 .set(n)来控制进度,其中n的取值范围为0-1。

    递增:要让进度条增加,只要调用 .inc()。这会产生一个随机增量,但不会让进度条达到100%。此函数适用于图片加载或其他类似的文件加载。

    强制完成:通过传递 true 参数给done(),使进度条满格,即使它没有被显示。

    配置

    minimum:设置最低百分比

    template:改变进度条的HTML结构。为保证进度条能正常工作,需要元素拥有role=’bar’属性。

    ease:调整动画设置,ease可传递CSS3缓冲动画字符串(如ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier)。speed为动画速度(单位ms)。

    更多用法

    https://github.com/rstacruz/nprogress

    2. nanobar

    nanobar

    简介

    非常非常轻量级的进度条,压缩过后仅有730字节。不需要引入jQuery。

    兼容性:IE8和the rest of the world

    安装

    下载最新版本:https://github.com/jacoborus/nanobar/archive/master.zip

    通过安装包管理器安装:

    Bower:

    npm:

    使用

    在项目中引入nanobar.js即可。

    进度创建

    参数

    bg <String>:(可选)CSS背景颜色属性,默认为”#000″即黑色。

    id <String>:(可选)nanobar的div的id

    target <DOM Element>:设置防止进度条HTML代码的位置,若target为空则会固定到document的顶部位置。

    进度运动

    nanobar.go(percentage):调整进度

    percentage <Number>:nonabar的百分比,取值为0-100

    例子

     Bootstrap进度条组件

    CSS样式:http://v3.bootcss.com/components/#progress-animated

  • 相关阅读:
    za
    分享
    git
    javascript总结
    2019年IT行业的前景如何,JAVA和大数据适合女性么?
    java编程培训都学习哪些内容
    python中如何进行json转化
    Java技术分享:搭建Mybatis-generator工程
    2019年Java技术中当前流行的三大框架
    MySQL在阿里云服务器上的在线安装及配置
  • 原文地址:https://www.cnblogs.com/ixixi/p/10689270.html
Copyright © 2020-2023  润新知