怎么安装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”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！