• 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

  • 相关阅读:
    android异步更新UI的方法
    android中不同acitity之间进行数据传递(或者数据保存)
    android post数据到服务器端工具类(包括postjson字符串、键值对)
    android GestureDetector
    android实现圆角矩形
    android调用图库获取图片显示在img中
    (转)Http上传 vs Ftp上传
    (转)[VSTS] 让ADO.NET Entity Framework支持Oracle数据库
    (转)网站设计常用技巧收集
    (转)有了jQuery.Jcrop,选取美女的哪个部位你说了算
  • 原文地址:https://www.cnblogs.com/ixixi/p/10689270.html
Copyright © 2020-2023  润新知