angular-progress-arc
Version:
AngularJS directive for displaying a circular progress meter.
96 lines (95 loc) • 3.17 kB
HTML
<html ng-app="example">
<head lang="en">
<meta charset="UTF-8">
<title>angular-progress-arc example</title>
<link href="http://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet" type="text/css">
<style>
body {
font-family: "PT Sans", Helvetica, Arial, sans-serif;
color: #333;
font-size: 18px;
}
* {
box-sizing: border-box;
}
.wrapper {
width: 380px;
margin: 0 auto;
}
svg {
display: block;
margin: 0 auto 20px;
}
.control {
display: block;
margin-bottom: 1em;
}
label {
display: inline-block;
text-align: right;
padding-right: 0.5em;
width: 40%;
}
input[type=text] {
width: 5em;
}
.radio label {
width: 100%;
text-align: center;
}
circle {
transition: stroke-dashoffset 0.1s linear;
}
</style>
</head>
<body>
<div class="wrapper" ng-controller="ExampleCtrl">
<progress-arc
size="{{ size }}"
stroke="{{ stroke }}"
stroke-width="{{ strokeWidth }}"
complete="progress"
background="{{ background }}"
counter-clockwise="{{ counterClockwise }}"></progress-arc>
<div class="control">
<label for="progress">Complete</label>
<input type="range" min="0" max="1" step="0.01" ng-model="progress" id="progress" />
<span>{{ progress | number: 2 }}</span>
</div>
<div class="control">
<label for="size">Size</label>
<input type="range" name="size" min="10" max="400" ng-model="size" id="size" />
<span>{{ size }}px</span>
</div>
<div class="control">
<label for="stroke-width">Stroke Width</label>
<input type="range" min="1" max="100" step="1" ng-model="strokeWidth" id="stroke-width" />
<span>{{ strokeWidth }}</span>
</div>
<div class="control">
<label for="stroke">Stroke</label>
<input type="text" ng-model="stroke" id="stroke">
</div>
<div class="control">
<label for="background">Background</label>
<input type="text" ng-model="background" id="background">
</div>
<div class="control radio">
<label><input type="checkbox" ng-model="counterClockwise" ng-true-value="1" ng-false-value="" /> Counter-clockwise</label>
</div>
</div>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../angular-progress-arc.js"></script>
<script>
var app = angular.module('example', ['angular-progress-arc']);
app.controller('ExampleCtrl', function ($scope) {
$scope.size = 200;
$scope.progress = 0.75;
$scope.strokeWidth = 50;
$scope.stroke = '#333';
$scope.counterClockwise = '';
});
</script>
</body>
</html>