ui.bootstrap.progressCircle
Circular progress bar for AngularJS Bootstrap. Demo
Usage
$scope.progress = 0.8;
<progress-circle ng-model="progress"></progress-circle>
Attribute | Description | Required | Default |
---|---|---|---|
ngModel | [min] to [max] | true | |
min | 0 | false | 0 |
max | 1 | false | 1 |
thickness | Thickness bar | false | 10 |
offset | Degree offset, starting at the left middle going clockwise. | false | 90 |
Style the bar by assigning a class or globally with the progress-circle
class.
.progress-circle path { fill: #29B6F6; }
Variant for a Solid Object
If a solid is needed instead of a path the code below will solve that. This version required a little trigonometry, which I have not done since high school so it might be a bit rough. One difference is that offset
defaults to 270
.