js plug-in YprogressBar achieves beautiful progress bar effect_javascript skills

Introduction

YprogressBar is a progress bar plug-in based on HTML5.

YprogressBar is a lightweight progress bar plug-in that is easy to use, takes up little resources, and imitates a good compression decompression interface with a digital display. It also supports adding parameters in the description to dynamically display more detailed execution information. Such as upload speed, remaining time, etc.

YprogressBar code is concisely written and has a reasonable structural design, which will not have any adverse effects on your system.

Interface preview

Instructions for use

File Reference

Simply quote the yprogressbar.css and yprogressbar.js files.

Usage Overview

 var ypb = new YprogressBar({
  title: "正在上传文件...",
  des: "上传速度：{{y:speed}}MB/秒 剩余时间约{{y:second}}秒",
  closeable: true,
  cancelCallback: function(rate, vars){
 console.log(rate);
 console.log(vars);
  }
 });
 ypb.show();

Instantiation parameter description

In order to fully demonstrate the object-oriented style, if you want to use YprogressBar, you must instantiate it. When instantiating, you need some parameters. The whole thing is an object. The specific parameters will be explained one by one below.

title

Progress bar title, explain what this progress bar is for.

des

For a more detailed description of what you want to do, you can write one sentence directly.

Sometimes we want to do something fancy, such as displaying upload speed, remaining time, etc. YprogressBar fully supports you to do this. You only need to add variables to the description. The format is: {{y:name}}.

For example: des: "Upload speed: {{y:speed}}MB/second, remaining time is about {{y:second}} seconds", where {{y:speed}} and {{y:second} } is the variable.

If a variable is specified here, the value of the variable must be specified in the second parameter when performing an update operation.

closeable

Destruction callback. Once the YprogressBar is destroyed, this callback will be triggered whether the destroy method is called manually or the user clicks the close button.

When the callback is triggered, two parameters will be passed in, namely: the current execution progress and the parameter value in the description at this moment (object contains name and value).

show method

No parameters are required.

The progress bar will not be displayed until the show method is called.

update method

Update progress, two parameters.

The first parameter is the current progress, expressed directly as a number, for example: 26, representing 26%.

The second parameter is an object, which needs to contain the values ​​of all variables in the description. If there are no variables in the description, this parameter can be ignored.

For example:

 ypb.update(26,{
 speed: 312,
 second: 5
 });

destroy method

Destroy the progress bar and release memory.

View On Github

The above is the entire content of this article, I hope you all like it.