JS plug-in Yprogressbar to achieve a beautiful progress bar effect

The following for you to introduce the JS plug-in Yprogressbar to achieve a beautiful progress bar effect:

Progressbar.js is a beautiful, responsive, progress bar effect with a dynamic SVG path. Using progressbar.js makes it easy to create progress bars of any shape. This JavaScript library provides several built-in shapes, such as lines, circles, and squares, but you can create your own progress bar effects using Illustrator or any other vector graphics editor.

Brief introduction

Yprogressbar is a HTML5 based progress bar plug-in.

Yprogressbar is a lightweight progress bar plug-in, easy to use, less resources, imitate a good pressure decompression interface, with digital display, while supporting the description to add parameters to dynamic display more detailed execution information, such as upload speed, the remaining time and so on.

Yprogressbar code Writing concise, structural design is reasonable, will not bring bad impact on your system.

Interface Preview

Instructions for use

File references

Simply refer to Yprogressbar.css and yprogressbar.js files.

Usage overview

?

1 2 3 4 5 6 7 8 9 10

var ypb = new Yprogressbar ({title: "Uploading File ...", des: "Upload speed: {{y:speed}}mb/seconds remaining time is about {{Y:second}} seconds", Closeable:true, Cancelca Llback:function (Rate, VARs) {console.log (rate); Console.log (VARs);}}); Ypb.show ();

Description of the instantiation parameter

In order to make the object-oriented, to use Yprogressbar, have to instantiate it, and the instantiation, it is necessary to some parameters, as a whole is an object, the specific parameters of the next one by one description.

Title

Progress bar title, explain what the progress bar is doing.

Des

To do a more detailed description of what to do, you can directly write a sentence.

Sometimes we want to do some tricks, such as showing upload speed, the rest of the time and so on, Yprogressbar fully support you to do so, just add a variable in the description, format: {{y:name}}.

For example: des: "Upload speed: {{{y:speed}}mb/seconds remaining time is about {{Y:second}} seconds", where {{y:speed}} and {{Y:second}} are variables.

If you specify a variable here, you must specify the value of the variable in the second argument when you do the update operation.

Closeable

Destroys the callback. Once Yprogressbar is destroyed, this callback is triggered either by manually calling the Destroy method or by clicking the Close button.

When a callback is fired, it passes in two parameters, namely, the current execution progress, the parameter value in the present description (the object contains name, value).

Show method

No parameters are required.

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

Update method

Update progress, two parameters.

The first parameter is the current progress, expressed directly in numbers, for example: 26, representing 26%.

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

For example:

?

1 2 3 4

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

Destroy method

Destroys the progress bar and frees up memory.

View on Github

The above mentioned is the entire content of this article, I hope you can enjoy