Countdown Timer in AngularJS using SVG

 

            

                {{humanizeDurationTimer(timer,'s')}}
            
            

        
        

.progress-wrapper {
    position: relative;
    margin: 2px auto;
    font-size: 21px;
}

.progress-wrapper path {
    stroke: #4a62ad !important;
}

.progress {
    position: absolute;
    width: 100%;
    height: 100% !important;
    line-height: 9em;
    font-size: 1em;
    text-align: center;
    font-weight: 100;
    background-color: #fff !important;
    box-shadow: none !important;
}

.round-progress-wrapper {
    text-align: center;
    margin-bottom: 25px
}
        

          // starts the timer
    $scope.startTimer = function() {
        mytimeout = $timeout($scope.onTimeout, 1000);
        $scope.started = true;
                $scope.selectTimer(600);
    };

 // This function helps to display the time in a correct way in the center of the timer
    $scope.humanizeDurationTimer = function(input, units) {
        // units is a string with possible values of y, M, w, d, h, m, s, ms
        if (input == 0) {
            return 0;
        } else {
            var duration = moment().startOf('day').add(input, units);
            var format = "";
            if (duration.hour() > 0) {
                format += "H[h] ";
            }
            if (duration.minute() > 0) {
                format += "m[m] ";
            }
            if (duration.second() > 0) {
                format += "s[s] ";
            }
            return duration.format(format);
        }
    };

// stops and resets the current timer
    $scope.stopTimer = function(closingModal) {
        if (closingModal != true) {
            $scope.$broadcast('timer-stopped', $scope.timer);
        }
        $scope.timer = $scope.timeForTimer;
        $scope.started = false;
        $scope.paused = false;
        $timeout.cancel(mytimeout);
    };

// When you open a timer page or modal, this function is called.
//This function also makes the progressbar move along with the countdown timer.
    $scope.selectTimer = function(val) {
        var timeDiff = 600 - val;
        $scope.timeForTimer = timeDiff + val;
        $scope.timer = val
        $scope.started = false;
        $scope.paused = false;
        $scope.done = false;
    };