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

Source: Internet
Author: User
Tags execution vars

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.


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


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.


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

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.