Real time Progress Bar Using Angular | jQuery

Real time Progress Bar Using Angular | jQuery | JavaScript

This is a basic, Circular Progress Bar SVG based roundabout advance bar segment which can be executed in jQuery, JavaScript and AngularJS.

Live Demo Download Source Code

Index.html

<!DOCTYPE html>
<html>
    <head>
        <title>
            Circular Progress Bar
        </title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="angular.min.js"></script>
        <script src="circular-progress-angular.js"></script>
    </head>
    <body>
        <div ng-app="myProgressBarApp" ng-controller="myCtrl" style="text-align: center;">
            <svg height="200" width="200">
                <circle id="_cir_P_x" cx="100" cy="100" r="60" stroke="#004C70" stroke-width="20" fill="#E0CC97"></circle>
                <circle id="_cir_P_y" cx="100" cy="100" r="60" stroke="#E0A025" stroke-width="20"  stroke-dasharray="0,1000" fill="none"></circle>
                <text x="50%" y="50%" text-anchor="middle" stroke="none" stroke-width="1px" dy=".3em" id="_cir_Per" ng-model="percentage">{{percentage}}</text>
            </svg>
            <button ng-click="__showProgress(40)" style="margin-left: -144px; background-color: #e0a025; border-radius: 15px; border: 1px solid #fff; padding: 10px 20px 10px 20px; margin-bottom: 0px !important;">Show 40%</button>
            <a href="#" class="btn btn-info" role="button">Java Script</a> 
            <a href="#" class="btn btn-info" role="button">Jquery</a>
        </div>
        
    </body>
</html>

circular-progress-angular.js

angular.module('myProgressBarApp', [])
        .controller('myCtrl', function ($scope, $interval) {

            $scope.percentage = "0%";

            $scope.__showProgress = function (_upto) {
                //Filter Percentage
                _upto = (_upto > 100) ? 100 : ((_upto < 0) ? 0 : _upto);

                var _progress = 0;

                var _cir_progress = angular.element(document.querySelector('#_cir_P_y'));
                var _text_percentage = angular.element(document.querySelector('#_cir_Per'));

                var _input_percentage;
                var _percentage;

                var _sleep = $interval(function () {
                    $scope._animateCircle();
                }, 25);

                $scope._animateCircle = function () {

                    _input_percentage = (_upto / 100) * 382;
                    _percentage = (_progress / 100) * 382;

                    if (_percentage >= _input_percentage) {

                        clearInterval(_sleep);
                    } else {

                        _progress++;

                        $scope.percentage = _progress + "%";

                        _cir_progress[0].style.strokeDasharray = _percentage + ', 1000';
                    }
                }
            };
        });