CODEWITHSUNDEEP
htmlangularjs
Punit
Punit

Reputation: 33

Progressbar in angular

I want to make Progressbar in Angular.js in decimal format, simple format, times based Progressbar. Someone could pls help !

E.g.
Start Timer {{ counter }}/{{ max }} = {{ (counter/max)*100 }}%
Start Timer 20/30 = 66.66666666666666%

Here is 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){ }

Upvotes: 0

Views: 2833

Answers (1)

Braulio
Braulio

Reputation: 1728

I use this round progress ba directive, works pretty well:

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

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

If you need a rectangular one give me a buzz I, have a custom directive implemented.

If you need two decimal numbers you only have to adjust the font size.

Test with two decimals:

enter image description here

Code to change (configuring ang:roundprogress directive)

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

Whole markup

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

Upvotes: 3

Related Questions