Circular Time

by Silambarasan_sundaram

HTML

<script src="https://crisbeto.github.io/angular-svg-round-progressbar/roundProgress.min.js"></script>
<div ng-app="demo">
<div ng-controller="demoCtrl">
    <div class="container">
     
        <h2>Sample progressbar</h2>
        <div class="progress-wrapper" ng-style="{'font-size': getFontSize()}">
            <!-- <div class="progress">{{ current }}/{{ max }}</div> -->
            <div class="progress">
                {{hours}}
                {{min}}
                {{secs}}
            </div>
            <div

                round-progress
                max="max"
                current="current"
                color="{{ currentColor }}"
                bgcolor="{{ bgColor }}"
                radius="{{ radius }}"
                semi="isSemi"
                rounded="rounded"
                stroke="{{ stroke }}"
                clockwise="clockwise"
                iterations="{{ iterations }}"
                animation="{{ currentAnimation }}">
            </div>
        </div>

       

        <button ng-click="increment();">Increment</button>
        <button ng-click="decrement();">Decrement</button>

        <button ng-click="increment(10);">Increment 10</button>
        <button ng-click="decrement(10);">Decrement 10</button>

        <form>
            <h3>Customize!</h3>

            <div class="cf">
                <label for="semi">Semicircle:</label>
                <input id="semi" type="checkbox" ng-model="isSemi"/>
            </div>

            <div class="cf">
                <label for="rounded">Rounded:</label>
                <input id="rounded" type="checkbox" ng-model="rounded"/>
            </div>

            <div class="cf">
                <label for="clockwise">Clockwise:</label>
                <input id="clockwise" type="checkbox" ng-model="clockwise"/>
            </div>

            <div class="cf">
                <label for="current">Current:</label>
                <input id="current" type="number"...

CSS

*{
            box-sizing: border-box;
        }
        body{
            font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
        }
        .cf:before,
        .cf:after {
            content: " "; /* 1 */
            display: table; /* 2 */
        }
        .cf:after {
            clear: both;
        }
        .progress-wrapper{
            position: relative;
            margin:20px auto;
            font-size: 40px;
        }
        .progress{
            position: absolute;
            width: 100%;
            height: 100%;
            line-height: 6em;
            font-size:1em;
            text-align: center;
            color: #bbb;
            font-weight: 100;
        }
        .container{
            width: 960px;
            margin:100px auto;
            text-align: center;
        }
        button{
            display: inline-block;
            padding: 10px 20px;
            background: #45ccce;
            color:#fff;
            font-size: 16px;
            border:none;
            cursor: pointer;
            border-radius: 4px;
            text-align: center;
        }
        form{
            text-align: left;
            width: 350px;
            margin: 30px auto;
        }
        form > div{
            margin-bottom: 15px;
        }
        input, select{
            float:right;
            padding: 5px;
            width: 150px;
        }
        input[type="checkbox"]{
            width: auto;
        }
        input[type="color"]{
            height: 30px;
        }
        .back{
            position: fixed;
            top:5px;
            right:5px;
        }

JavaScript

angular.module('demo', ['angular-svg-round-progress'])
        .controller('demoCtrl', ['$scope', '$timeout', 'roundProgressService', function($scope, $timeout, roundProgressService, $interval){

            var today_date = new Date();
            var upTime = new Date('Jun,1,2015,00:00:00');
            var EndTime = new Date('Jun,3,2015,00:00:00');
            var difference = EndTime - upTime;

            


            var sec_in_48_hourse = 48 *60 *60;
            var one_percent = sec_in_48_hourse /100
            var current_difference = today_date - upTime;
            $scope.percent = (((current_difference / 1000) * (1/100)) / one_percent) * 100;
            //$scope.test1 = $scope.percent;
            var cur_limit = $scope.percent;

            if(today_date.getTime() <= EndTime.getTime() && today_date.getTime() >= upTime.getTime()){
                var cur_limit = $scope.percent;

                //var days    = ("0" + Number(Math.floor(current_difference/(60*60*1000*24)))).slice(-2);
                var hours   = ("0" + Number(Math.floor((current_difference%(60*60*1000*24))/(60*60*1000)))).slice(-2);
                var mins    = ("0" + Number(Math.floor(((current_difference%(60*60*1000*24))%(60*60*1000))/(60*1000)))).slice(-2);
                var secs    = ("0" + Number(Math.floor((((current_difference%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000))).slice(-2);

                $scope.hours = hours;
                $scope.min = mins;
                $scope.secs = secs;

            }else{
                var cur_limit = 0;
            }
            
            

            $scope.current =        cur_limit  ;
            $scope.max =            100;
            $scope.uploadCurrent =  0;
            $scope.stroke =         7;
            $scope.radius =         250;
            $scope.isSemi =         false;
            $scope.rounded =        false;
            $scope.clockwise =      true;
            $scope.currentColor =   '#45ccce';
     ...