在角材料的垫进度条内的文本

Question

在垫进度条我要显示进度条中的文本不珍惜任何其他百分比。任何一个可以帮助显示进度条内的文本？

<mat-progress-bar mode="determinate" class="progress-bar" [color]="color " [value]="progress" ></mat-progress-bar>

Answer 1

您需要手动创建它，因为它是不是在材料2.X可用

解： 您可以将<md-progress-spinner>一个<div>内，里面添加另一个<div>显示的文字和手动调节位置。

<div>
<md-progress-spinner [color]="color" 
                     [mode]="mode" 
                     [value]="value" aria-label="Rating" 
                     mode="determinate">
</md-progress-spinner>
<div style="position:relative; top: -60px; left: 30px;">
    {{ showText }}
</div>

我希望可以解决您的查询。

工作示例：This can help you, I found on SO only

Answer 2

我不认为你可以用现有的材料进度条配置，你需要通过添加一个div您的自定义样式如下拿出自己实现它的方式，

<mat-progress-spinner
        class="example-margin"
        [color]="color"
        [mode]="mode"
        [value]="value">        
    </mat-progress-spinner>
    <div style="position:relative; top: -60px; left: 30px;"> Loading </div>
 </mat-card-content>

STACKBLITZ DEMO

Answer 3

您可以使用CSS来做到这一点。这样一来，你的内容总是在集中进度条。唯一的条件是width是相同的作为父height的mat-progress-spinner和div：

<div style="position: relative; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center;">
  <mat-progress-spinner style="width: 100px;height: 100px;position: absolute;top: 0;left: 0;" [color]="'primary'" [mode]="'determinate'" [value]="60">
  </mat-progress-spinner>
  <h1 >69%</h1>
</div>