Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge of "how to install nanobar js". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Nanobar.js is a lightweight pure js progress bar plug-in. This progress bar plug-in is compatible with ie8 browsers. It is easy to use and provides some ways to control the current progress of the progress bar.

Install the nanobar.js progress bar

Bowerinstallnanobar

/ / or

Npminstallnanobar

Js code

Varsimplebar=newNanobar ()

Simplebar.go (50)

Varcolorbar=newNanobar ({target:document.getElementById ('color')})

Colorbar.go (50)

Varcenteredbar=newNanobar ({target:document.getElementById ('centered')})

Centeredbar.go (50)

Nanobar.js progress bar initialization plug-in

You can use the newNanobar () method to generate a new progress bar instance object.

Varnanobar=newNanobar (options)

The available options parameters are:

Id:String type, optional parameter. The id of the div container that holds the nanobar.

Classname:String type, optional parameter. The class of the div container that holds the nanobar.

Target:DOM element, optional parameter. The target element of nanobar, nanobar, will be placed at the top of this element.

Move the progress bar through the nanobar.go (percentage) method.

Sample code

Varoptions= {

Classname:'my-class'

Id:'my-id'

Target:document.getElementById ('myDivId')

}

Varnanobar=newNanobar (options)

/ / movebar

Nanobar.go (30); / / sizebar30%

Nanobar.go (76); / / sizebar76%

/ / sizebar100%andandfinish

Nanobar.go (100)

That's all for "how to install nanobar js". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.