自定义圆形进度条组件

自定义圆形进度条组件
插件名称 AngularProgressbar
发布时间 2020年5月25日
插件作者 pavanjava

另一个Angular指令可为您的Web应用呈现自定义的圆形进度条。

如下所示在您的index.html中包含progressBar模块

<script src="modules/progressBar.js" type="text/javascript"></script>

将以下模块包含到您的应用程序中

var myapp = angular.module('MyApp',['ui.progressbar']);

在html中实现逻辑,请包括以下内容

<div ng-controller="TestBenchController">
<progress-bar percentage-value="value"></progress-bar>
</div>

如下操作控制器上的进度条。

myapp.controller('TestBenchController',['$scope',function ($scope) {

	$scope.value = 85; // 应在进度条中显示为已完成的百分比最小值:0, 最大值:100
    
}]);

其他可用于控制颜色和大小的可选属性:

default-size = [big,medium,small]
default-color = [green,orange]

例:

<progress-bar percentage-value="value" default-size="medium", default-color="orange"></progress-bar>