Прогресс бар повторяющиеся проценты

Question

Я разработал отзывчивый индикатор выполнения, однако значения прогресса повторяются. Должно отображаться только центральное значение.

Кто-нибудь знает, как я могу решить эту проблему?

DEMO

 <div id="tab1">
      <dx-data-grid class="tableTask" [dataSource]="datas" [showColumnLines]="false"
        [showRowLines]="false" [columnAutoWidth]="true" [allowColumnResizing]="false">
        <dxo-header-filter [visible]="true"></dxo-header-filter>
        <dxo-remote-operations [sorting]="true" [paging]="true" [filtering]="true"></dxo-remote-operations>
        <dxo-paging [pageSize]="200"></dxo-paging>
        <dxi-column dataField="id" caption="ID" [width]="100" [allowFiltering]="false" [allowSorting]="false"></dxi-column>
        <dxi-column dataField="name" caption="Name"></dxi-column>
        <dxi-column dataField="surname" caption="Surname"></dxi-column>
           <dxi-column dataField="progress" cellTemplate="Progress" caption="Progress"></dxi-column>
            <div *dxTemplate="let data of 'Progress'">
          <div style="top:4px" class="progress aqua" [attr.data-width]="percentage" (mousedown)="updateSlider($event,data)">
            <div class="progress-text">{{data.key.progress}} %</div>
            <div class="progress-bar" [style.width]="data.key.progress + '%'">
              <div class="progress-text">{{data.key.progress}} %</div>
            </div>
          </div>
            </div>
      </dx-data-grid>
    </div>

Answer 1

Я удалил процентное значение внутри индикатора выполнения и добавил z-index .

Это должно сработать:

 <div id="tab1">
      <dx-data-grid class="tableTask" [dataSource]="datas" [showColumnLines]="false"
        [showRowLines]="false" [columnAutoWidth]="true" [allowColumnResizing]="false">
        <dxo-header-filter [visible]="true"></dxo-header-filter>
        <dxo-remote-operations [sorting]="true" [paging]="true" [filtering]="true"></dxo-remote-operations>
        <dxo-paging [pageSize]="200"></dxo-paging>
        <dxi-column dataField="id" caption="ID" [width]="100" [allowFiltering]="false" [allowSorting]="false"></dxi-column>
        <dxi-column dataField="name" caption="Name"></dxi-column>
        <dxi-column dataField="surname" caption="Surname"></dxi-column>
           <dxi-column dataField="progress" cellTemplate="Progress" caption="Progress"></dxi-column>
            <div *dxTemplate="let data of 'Progress'">
          <div style="top:4px" class="progress aqua" [attr.data-width]="percentage" (mousedown)="updateSlider($event,data)">
            <div class="progress-text" style="z-index:2">{{data.key.progress}} %</div>
            <div class="progress-bar" style="z-index:1" [style.width]="data.key.progress + '%'">
            </div>
          </div>
            </div>
      </dx-data-grid>
    </div>

Answer 2

Я думаю, что вы хотите просто отобразить белый текст.

Для этого вам нужно удалить строку 15 в файле app.component.html и добавить большой z-индекс к классу progress-text

Answer 3

Просто удалите эту строку <div class="progress-text">{{data.key.progress}} %</div> из кода ниже для бара% белого и удалите <div class="progress-text">{{data.key.progress}} %</div> внутри progress-bar для бара%

<div style="top:4px" class="progress aqua" [attr.data-width]="percentage" (mousedown)="updateSlider($event,data)">
            <div class="progress-text">{{data.key.progress}} %</div>
            <div class="progress-bar" [style.width]="data.key.progress + '%'">
              <div class="progress-text">{{data.key.progress}} %</div>
            </div>
          </div>