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.
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).
Loading State
Description
-
Animated Spinner: Loading symbol.
- Label: The text is placed right under the loading symbol. The font size corresponds to the size of the icon.
- Alignment :Both loading icon and text are top aligned with margin 25%.
An example of loading state in a list view.
- View Angular PatternFly Example
- View PatternFly NG Example
- View PatternFly React Example
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.