Slightly nicer demo page.

Author: crisbeto

Gruntfile.js

@@ -47,7 +47,13 @@ module.exports = function(grunt) {
                 base: 'build'
             },
             deploy: {
-                src: ['index.html','roundProgress.js', 'roundProgress.min.js']
+                src: [
+                    'index.html',
+                    'demo.css',
+                    'demo.js',
+                    'roundProgress.js',
+                    'roundProgress.min.js'
+                ]
             }
         },
         jshint: {

build/demo.css

@@ -0,0 +1,111 @@
+*{
+    box-sizing: border-box;
+}
+
+body{
+    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    background: #fafafa;
+}
+
+h2{
+    margin: 0 0 40px;
+}
+
+.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: 650px;
+    margin: 40px auto 80px;
+    text-align: center;
+    padding: 40px;
+    background: #fff;
+    border: solid 1px #ccc;
+    border-radius: 4px;
+}
+
+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;
+}
+
+.ng-cloak{
+    display: none;
+}
+
+@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;
+    }
+}

build/demo.js

@@ -0,0 +1,78 @@
+angular.module('demo', ['angular-svg-round-progressbar']).controller('demoCtrl', ['$scope', '$interval', '$timeout', '$window', 'roundProgressService', function($scope, $interval, $timeout, $window, 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;
+    };
+
+    $scope.showPreciseCurrent = function(amount){
+        $timeout(function(){
+            if(amount <= 0){
+                $scope.preciseCurrent = $scope.current;
+            }else{
+                var math = $window.Math;
+                $scope.preciseCurrent = math.min(math.round(amount), $scope.max);
+            }
+        });
+    };
+
+    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);
+}]);