圆心的圆形进度量？ （有角度的材料）

Question

我使用了角度材质的圆形进度条元素并试图设置圆心的进度，但是它很糟糕。 一些有才华，有天赋的前端开发人员可能知道如何做到这一点？ 提前致谢。

＆＃13;

＆＃13;

<md-progress-circular layout-padding value="{{vm.progress}}" md-diameter="95" md-mode="determinate"> {{vm.progress}}%</md-progress-circular>
//how the hack should i css it to be in the middle :( ?
        <h4>{{vm.progress}}%</h4>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你可以尝试这样的事情 - CodePen

标记

<div ng-controller="AppCtrl as vm" ng-cloak="" ng-app="MyApp" layout-fill layout="row" layout-align="center center">
  <div style="width:{{vm.diameter}}px; height:{{vm.diameter}}px">
    <md-progress-circular md-diameter="{{vm.diameter}}" md-mode="determinate" value="{{vm.progress}}">
    </md-progress-circular>
    <h4 id="progress">{{vm.progress}}%</h4>
  </div>
</div>

JS

angular.module('MyApp',['ngMaterial'])

.controller('AppCtrl', function() {
  this.diameter = 200;
  this.progress = 83;
});

CSS

#progress {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
}