-
Notifications
You must be signed in to change notification settings - Fork 25
/
Copy pathindex.html
55 lines (46 loc) · 2.14 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html ng-app="angularjs-starter">
<head>
<title>Angular Round Progress Directive</title>
<link href="bootstrap-combined.min.css" rel="stylesheet" />
<style type="text/css">
html,body {
background-color: #3c3b49;
color: #fff;
}
</style>
<script src="angular.min.js"></script>
<script src="angular-round-progress-directive.js"></script>
<script>
var app = angular.module('angularjs-starter', ['angular.directives-round-progress']);
app.controller('MainCtrl', function($scope) {
$scope.roundProgressData = {
label: 11,
percentage: 0.11
}
// Here I synchronize the value of label and percentage in order to have a nice demo
$scope.$watch('roundProgressData', function (newValue, oldValue) {
newValue.percentage = newValue.label / 100;
}, true);
});
</script>
</head>
<body ng-controller="MainCtrl">
<h1>AngularJS Round Progress Directive</h1>
<p>Have a look at the source code to see an example.</p>
<!-- You can see here that you can override the default settings of the directive (color, size, width, font, etc) -->
<div ang:round:progress data-round-progress-model="roundProgressData"
data-round-progress-width="500"
data-round-progress-height="500"
data-round-progress-outer-circle-width="40"
data-round-progress-inner-circle-width="10"
data-round-progress-outer-circle-radius="200"
data-round-progress-inner-circle-radius="140"
data-round-progress-label-font="100pt Arial"
data-round-progress-outer-circle-background-color="#505769"
data-round-progress-outer-circle-foreground-color="#12eeb9"
data-round-progress-inner-circle-color="#505769"
data-round-progress-label-color="#fff"></div>
<input type="number" ng-model="roundProgressData.label"/>
</body>
</html>