Loading State

Loading State

The goal of the Loading State pattern is to provide a visual clue that content is loading and the user has to wait before the view can be populated.

Loading State pattern

The empty state pattern is most often used in conjunction with one of the content views (e.g. List View, Table View, and Card View).

Empty State in context

Loading State


Loading State with Callouts

  1. Animated Spinner: Loading symbol.

  2. Label: The text is placed right under the loading symbol. The font size corresponds to the size of the icon.
  3. Alignment :Both loading icon and text are top aligned with margin 25%.

An example of loading state in a list view. Loading State in a List View

Code icon

PatternFly Core Example Not Available

There is no PatternFly-Core code available for this pattern at this time. Links to the JS framework implementations can be seen above.

Visit the Contributing to PatternFly documentation to learn how to contribute the code.