如何增加PrimeNg loadingIcon的大小

问题描述

在PrimeNg Turbotable中，我使用loadIcon在加载数据时显示微调器。我无法增加primeIcon pi-spinner的大小。

HTML代码：

<p-table #resdt exportFilename="RecordChange"  [value]="recordList"  
      [(selection)]="selectedRecord" [loadingIcon]="loadingIcon" 
      [loading]="loading" sortField="recordCURD" sortMode="single" 
      [autoLayout]="true" scrollable="true" scrollHeight="550px">
....
</p-table>

TypeScript代码：

this.loadingIcon = 'pi pi-spin pi-spinner';

解决方法

您只需要像这样更新加载元素的包装器类

style.css

.ui-table .ui-table-loading-icon {
    font-size: 5em !important;
}

或我们可以设置图标类，因此只需创建一个新类来增加字体大小即可完成

.loading-icon-size { 
  font-size: 5em !important;
 }

模板

<p-table .... [loading]="loading" loadingIcon="
    pi pi-spin pi-spinner loading-icon-size ">
 .....
</table> 

demo ??