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
var ypb = new Yprogressbar ({
title: "Uploading File ...",
des: "Upload speed: {{y:speed}}mb/seconds remaining time approximately {{Y:second}} seconds",
Closeable:true,
cancelcallback: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:
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.