怎么安裝nanobar js

本篇內容介紹了“怎么安裝nanobar js”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

　　nanobar.js是一款輕量級的純js進度條插件。這款進度條插件兼容ie8瀏覽器，它使用簡單，并提供一些方法來控制進度條的當前進度。

　　安裝nanobar.js進度條

　　bowerinstallnanobar

　　//or

　　npminstallnanobar

　　js代碼

　　<scripttype="text/JavaScript"src="js/nanobar.js"></script>

　　<scripttype="text/JavaScript">

　　 varsimplebar=newNanobar();

　　 simplebar.go(50);

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

　　 colorbar.go(50);

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

　　 centeredbar.go(50);

　　</script>

　　nanobar.js進度條初始化插件

　　可以使用newNanobar()的方法來生成一個新的進度條實例對象。

　　varnanobar=newNanobar(options);

　　可用的options參數有：

　　id：String類型，可選參數。容納nanobar的div容器的id。

　　classname：String類型，可選參數。容納nanobar的div容器的class。

　　target：DOM元素，可選參數。nanobar的目標元素，nanobar會被放置到這個元素的頂部位置。

　　通過nanobar.go(percentage)方法來移動進度條。

　　示例代碼

　　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);

“怎么安裝nanobar js”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！