Skip to content

Processing Indicator View


open class FUIProcessingIndicatorView: NibDesignable

FUIProcessingIndicatorView is an IBDesignable UI component. A processing indicator shows that a task is in progress. It shows a circular activity indicator to visualize indeterminate processing and has an optional UILabel below the activity indicator indicating to the user what is being processed.

By default, this view is not visible and the animation is stopped. The activity indicator has a predefined size and line width that depends on the horizontal size class.



let processingIndicatorView = FUIProcessingIndicatorView(frame: CGRect())

Inside a Storyboard or Xib

  1. Drag and drop a UIView component to Interface Builder's canvas.
  2. Switch class name from UIView to FUIProcessingIndicatorView, and set module to SAPFiori.
  3. Create an outlet of the processing indicator view to be able to access its properties.

// do something


The animation of the processing indicator can be started or stopped without affecting the visibility of the view.

// do something


The styleClass of the view is fdlFUIProcessingIndicatorView.

In the .nss file you can use the following parameters:

  • fdlFUIProcessingIndicatorView_textLabel: changes the appearance of the textLabel


fdlFUIProcessingIndicatorView_textLabel {
   background-color: red;
   border-color: green;
   border-width: 2;
   corner-radius: 2;
   font-color: blue;
   font-color-highlighted: yellow;
   font-name: Avenir;
   font-size: 15;
   height: 50;
   shadow-color: black;
   shadow-offset: 1, 2;
   shadow-opacity: 0.5;
   shadow-radius: 2;
   text-align: center;
   text-alpha: 0.9;
   text-auto-fit: true;
   text-shadow-color: black;
   text-shadow-offset: 1, 2;
   text-transform: uppercase;
   width: 100;

Last update: April 14, 2021