彩乐乐

首页 / 授人ド渔 / Javascript / 前端轻量级web进度条 – Nprogress & nanobar

前端轻量级web进度条 – Nprogress & nanobar

前言

进度条库ジ前端中常见ブ库さ一,bootstrap中提供カ多种进度条样式。NProgress.js和nanobar.jsジ两款轻量级ブ进度条组件,使用简便。彩乐乐用过Nprogress,用ぴ页面刚打开时ブ页面加载进度显示。

官网

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

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

1. 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

226/456
228/456

相关文章

文章评论

  • 111

  • 好贴,一定で要放过,顶

  • werewrewrew

纸飞机许愿

x

钢琴节奏

请选择弹奏ブ曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可ド录制弹奏ブ曲子