
<!doctype html>
<html lang="en" ng-app="demo">
<head>
    <meta charset="UTF-8">
    <title>Angular SVG round progressbar demo</title>
    <meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
    <style>
        *{
            box-sizing: border-box;
        }

        body{
            font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        }

        .cf:before,
        .cf:after {
            content: " ";
            display: table;
        }

        .cf:after {
            clear: both;
        }

        .progress-wrapper{
            position: relative;
            margin:20px auto;
            font-size: 40px;
        }

        .progress{
            position: absolute;
            color: #bbb;
            font-weight: 100;
            line-height: 1;
        }

        .container{
            width: 100%;
            max-width: 960px;
            margin:50px auto 100px;
            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;
            margin: 0 5px 5px 0;
        }

        form{
            text-align: left;
            max-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;
        }

        @media(max-width: 480px){
            .back{
                position: static;
                display: block;
                text-align: center;
            }

            input, select{
                width: 100%;
                margin-top: 5px;
                float:none;
            }

            .container{
                margin-top: 25px;
            }
        }
    </style>
</head>
<body ng-controller="demoCtrl">
    <div class="container">
        <a class="back" href="https://github.com/crisbeto/angular-svg-round-progressbar">Back to project repo</a>

        <h2>Sample progressbar</h2>
        <div class="progress-wrapper">
            <div class="progress ng-cloak" ng-style="getStyle()">{{ current }}/{{ max }}</div>
            <div
                round-progress
                max="max"
                current="current"
                color="{{ getColor() }}"
                bgcolor="{{ bgColor }}"
                radius="{{ radius }}"
                semi="isSemi"
                rounded="rounded"
                stroke="{{ stroke }}"
                clockwise="clockwise"
                responsive="responsive"
                duration="{{ duration }}"
                animation="{{ currentAnimation }}"
                offset="{{ offset }}"
                animation-delay="{{ animationDelay }}">

                <svg>
                    <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
                        <stop offset="5%"  stop-color="green"/>
                        <stop offset="95%" stop-color="gold"/>
                    </linearGradient>
                </svg>
            </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="responsive">Responsive:</label>
                <input id="responsive" type="checkbox" ng-model="responsive"/>
            </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="gradient">Gradient:</label>
                <input id="gradient" type="checkbox" ng-model="gradient"/>
            </div>

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

            <div class="cf">
                <label for="max">Max:</label>
                <input id="max" type="number" ng-model="max"/>
            </div>

            <div class="cf">
                <label for="stroke">Stroke:</label>
                <input id="stroke" type="number" ng-model="stroke"/>
            </div>

            <div class="cf">
                <label for="radius">Radius:</label>
                <input id="radius" type="number" ng-model="radius"/>
            </div>

            <div class="cf">
                <label for="offset">Offset:</label>
                <input id="offset" type="number" ng-model="offset"/>
            </div>

            <div class="cf">
                <label for="duration">Duration:</label>
                <input id="duration" type="number" ng-model="duration"/>
            </div>

            <div class="cf">
                <label for="animation">Animation:</label>
                <select id="animation" ng-model="currentAnimation" ng-options="animation for animation in animations"></select>
            </div>

            <div class="cf">
                <label for="delay">Animation delay:</label>
                <input id="delay" type="number" ng-model="animationDelay"/>
            </div>

            <div class="cf">
                <label for="color">Color:</label>
                <input id="color" type="color" ng-model="currentColor"/>
            </div>

            <div class="cf">
                <label for="bgcolor">Background color:</label>
                <input id="bgcolor" type="color" ng-model="bgColor"/>
            </div>
        </form>
    </div>

    <div class="container">
        <h2>Clock example</h2>
        <div class="progress-wrapper">
            <div class="progress ng-cloak" ng-style="getStyle()">{{ time }}</div>
            <div
                round-progress
                max="24"
                current="hours"
                color="#45ccce"
                bgcolor="transparent"
                radius="{{ radius*1.5 }}"
                semi="isSemi"
                rounded="rounded"
                clockwise="clockwise"
                responsive="responsive"
                stroke="{{ stroke*1.5 }}"
                animation="{{ currentAnimation }}">

                <div
                    round-progress
                    max="59"
                    current="minutes"
                    color="#0971B2"
                    bgcolor="transparent"
                    radius="{{ radius*1.5 }}"
                    semi="isSemi"
                    rounded="rounded"
                    clockwise="clockwise"
                    responsive="responsive"
                    stroke="{{ stroke*1.5 }}"
                    animation="{{ currentAnimation }}"
                    offset="inherit">


                    <div
                        round-progress
                        max="59"
                        current="seconds"
                        color="#1485CC"
                        bgcolor="transparent"
                        radius="{{ radius*1.5 }}"
                        semi="isSemi"
                        rounded="rounded"
                        clockwise="clockwise"
                        responsive="responsive"
                        stroke="{{ stroke*1.5 }}"
                        animation="{{ currentAnimation }}"
                        offset="inherit"></div>
                    </div>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
    <script src="roundProgress.js"></script>
    <script>
        'use strict';

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

            $scope.current =        27;
            $scope.max =            50;
            $scope.offset =         0;
            $scope.timerCurrent =   0;
            $scope.uploadCurrent =  0;
            $scope.stroke =         15;
            $scope.radius =         125;
            $scope.isSemi =         false;
            $scope.rounded =        false;
            $scope.responsive =     false;
            $scope.clockwise =      true;
            $scope.currentColor =   '#45ccce';
            $scope.bgColor =        '#eaeaea';
            $scope.duration =       800;
            $scope.currentAnimation = 'easeOutCubic';
            $scope.animationDelay = 0;

            $scope.increment = function(amount){
                $scope.current+=(amount || 1);
            };

            $scope.decrement = function(amount){
                $scope.current-=(amount || 1);
            };

            $scope.animations = [];

            angular.forEach(roundProgressService.animations, function(value, key){
                $scope.animations.push(key);
            });

            $scope.getStyle = function(){
                var transform = ($scope.isSemi ? '' : 'translateY(-50%) ') + 'translateX(-50%)';

                return {
                    'top': $scope.isSemi ? 'auto' : '50%',
                    'bottom': $scope.isSemi ? '5%' : 'auto',
                    'left': '50%',
                    'transform': transform,
                    '-moz-transform': transform,
                    '-webkit-transform': transform,
                    'font-size': $scope.radius/3.5 + 'px'
                };
            };

            $scope.getColor = function(){
                return $scope.gradient ? 'url(#gradient)' : $scope.currentColor;
            };

            var getPadded = function(val){
                return val < 10 ? ('0' + val) : val;
            };

            $interval(function(){
                var date = new Date();
                var hours = date.getHours();
                var minutes = date.getMinutes();
                var seconds = date.getSeconds();

                $scope.hours = hours;
                $scope.minutes = minutes;
                $scope.seconds = seconds;
                $scope.time = getPadded(hours) + ':' + getPadded(minutes) + ':' + getPadded(seconds);
            }, 1000);
        }]);
    </script>
</body>
</html>
