js插件YprogressBar实现漂亮的进度条效果

简介

YprogressBar是一个基于HTML5的进度条插件。

YprogressBar是一个轻量级的进度条插件，使用方便，占用资源少，模仿压敏解压界面，有数字显示。它还支持在描述中添加参数，以动态显示更详细的执行信息，如上传速度和剩余时间。

YprogressBar代码编写简单，结构设计合理，不会给你的系统带来不良影响。

界面预览

说明

文件访问

只需参考yprogressbar.css和yprogressbar.js文件。

用法概述

varypb=new yprogressbar({ title : '正在上载文件.'，des: '上传速度：{{y:speed}}MB/秒，剩余时间约为{{y:second}}秒'，可关闭3360 true，cancelcalcallback 3360 function(rate)console . log(vars)；} });ypb . show()；实例参数描述

为了展示面向对象的力量，如果你想使用YprogressBar，你必须实例化它。当实例化它时，您需要一些参数，这些参数总体上是一个对象。具体参数将逐一说明。

标题

进度条的标题，说明这个进度条是干什么用的。

数据加密标准

给一个更详细的做什么的描述，就可以直接写句子了。

有时候我们想做一些花样，比如显示上传速度，剩余时间等等。YprogressBar完全支持你这样做，只需在描述中添加变量，格式为{{y:name}}。

例如，des: '上传速度：{{y:speed}}MB/s，剩余时间约为{{y:second}}秒'，其中{{y:speed}}和{{y:second}}为变量。

如果在此指定了变量，则在执行更新操作时，必须在第二个参数中指定变量值。

可关闭的

破坏回调。一旦YprogressBar被销毁，无论是手动调用销毁方法还是用户点击关闭按钮，都会触发这个回调。

当回调被触发时，会传入两个参数，即当前执行进度和此刻描述中的参数值(对象包含名称和值)。

显示方法

不需要参数。

在调用show方法之前，进度条不会显示。

更新方法

更新进度，两个参数。

第一个参数是当前进度，直接用数字表示，例如：26，表示26%。

第二个参数是一个对象，它需要包含描述中所有变量的值。如果描述中没有变量，可以忽略该参数。

例如：

ypb.update(26，{ speed: 312，second : 5 })；破坏方法

销毁进度条，释放内存。

关于Github的看法

以上就是本文的全部内容，希望大家喜欢。