Js plug-in YprogressBar to achieve a beautiful progress bar, jsyprogressbar

Js plug-in YprogressBar to achieve a beautiful progress bar, jsyprogressbar

Introduction

YprogressBar is an HTML5-based progress bar plug-in.

YprogressBar is a lightweight progress bar plug-in. It is easy to use and consumes less resources. It imitates the compressed decompression interface and displays numbers. It also supports adding parameters to the description, dynamically display more detailed execution information, such as the upload speed and remaining time.

The YprogressBar code is concise and well-structured, which does not affect your system.

Interface Preview

 

Instructions for use

File Reference

You only need to use the yprogressbar.css and yprogressbar. js files.

Overview

Var ypb = new YprogressBar ({title: "uploading file... ", des:" upload speed: {y: speed} MB/second remaining time: {y: second} seconds ", closeable: true, cancelCallback: function (rate, vars) {console. log (rate); console. log (vars) ;}}); ypb. show ();

Instantiation parameter description

To show the object orientation, if you want to use the YprogressBar, You have to instantiate it. Some parameters are required for instantiation, which is an object as a whole. The specific parameters are described in the following sections.

Title

The title of the progress bar, indicating what the progress bar is doing.

Des

You can directly write a sentence to describe what you want to do in more detail.

Sometimes we want to do some tricks, such as displaying the upload speed and the remaining time. YprogressBar supports you to do this. You only need to add a variable to the description, in the format of {y: name }}.

For example, des: "upload speed: {y: speed} MB/second remaining time: {y: second} seconds", here {y: speed }}and {y: second} are variables.

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

Closeable

Destroy callback. Once the YprogressBar is destroyed, this callback is triggered either by manually calling the destroy method or by clicking the close button.

When a callback is triggered, two parameters are passed in: the current execution progress and the parameter values in the description at the moment (the object contains name and value ).

Show Method

No parameters are required.

The progress bar is displayed only after the show method is called.

Update Method

Update Progress, two parameters.

The first parameter is the current progress, which is expressed in numbers. For example, 26 represents 26%.

The second parameter is an object that must contain the values of all variables in the description. If there is no variable in the description, this parameter can be ignored.

For example:

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

Destroy Method

Destroys the progress bar and releases the memory.

View On Github

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