cssangularui5-webcomponents

How to change fd-busy-indicator size


I'm using the fiori ngx library on angular. I am using the <fd-busy-indicator> for loading scrreens from wiki. But the sizes s is too small and m is too big for me. I tried to manually fix it by doing

::ng-deep fd-busy-indicator {
  width: 12px;      
  height: 12px;
}

but it did not work and the indicator became vertically alighed. Please tell me how to fix it.


Solution

  • You need to override the style of individual circles. If you are using m sized then your css would look something like:

    ::ng-deep .fd-busy-indicator--m .fd-busy-indicator--circle-0,
    ::ng-deep .fd-busy-indicator--m .fd-busy-indicator--circle-1,
    ::ng-deep .fd-busy-indicator--m .fd-busy-indicator--circle-2 {
       width: 11px;
       height: 11px;
    }