角度的进度条

Question

我想以十进制格式，简单格式，基于时间的Progressbar在Angular.js中创建Progressbar。有人可以帮忙！

E.g。
开始计时器{{counter}} / {{max}} = {{（counter / max）* 100}}％
启动计时器20/30 = 66.66666666666666％

以下是example.js：

angular.module('plunker', ['ui.bootstrap']);

var ProgressDemoCtrl = function ($scope) {
    $scope.max = 200;
    $scope.random = function () {
        var value = Math.floor((Math.random() * 100) + 1);
        var type;

        if (value < 25) {
            type = 'success';
        } else if (value < 50) {
            type = 'info';
        } else if (value < 75) {
            type = 'warning';
        } else {
            type = 'danger';
        }

        $scope.showWarning = (type === 'danger' || type === 'warning');
        $scope.dynamic = value;
        $scope.type = type;
    };

var app = angular.module('plunker', ['ui.bootstrap']);

app.controller('ProgressDemoCtrl', function ($scope) {
    $scope.value = 40;
    $scope.state = "progress-bar-success";
    $scope.myStyle = {width: $scope.value + '%'};
});

$scope.random();

$scope.randomStacked = function() { $scope.stacked = [];

var types = ['success', 'info', 'warning', 'danger']; for (var i = 0, n = Math.floor((Math.random() * 4) + 1); i < n; i++) { var index = Math.floor((Math.random() * 4));

$scope.stacked.push({ value: Math.floor((Math.random() * 30) + 1),

type: types[index] }); } }; $scope.randomStacked(); };

var app = angular.module('progressApp',['nprogress']); var MainCtrl = function($scope,ngProgress){ }

Answer 1

我使用这一轮进度ba指令，效果很好：

http://www.youtube.com/watch?v=w2qrYL0Le24

https://github.com/angular-directives/angular-round-progress-directive

如果您需要一个矩形的，请给我一个嗡嗡声，我已经实现了自定义指令。

如果您需要两个十进制数字，则只需调整字体大小。

用两位小数进行测试：

要更改的代码（配置ang：roundprogress指令）

data-round-progress-label-font="80pt Arial"

整个标记

<div ang:round:progress data-round-progress-model="roundProgressData"
                        data-round-progress-width="500"
                        data-round-progress-height="500"
                        data-round-progress-outer-circle-width="40"
                        data-round-progress-inner-circle-width="10"
                        data-round-progress-outer-circle-radius="200"
                        data-round-progress-inner-circle-radius="140"
                        data-round-progress-label-font="80pt Arial"
                        data-round-progress-outer-circle-background-color="#505769"
                        data-round-progress-outer-circle-foreground-color="#12eeb9"
                        data-round-progress-inner-circle-color="#505769"
                        data-round-progress-label-color="#fff"></div>